Menu
Is it possible, and do any frameworks exist that support tear-off widgets in a web browser? i.e. In Visual Studio, you can take any of the windows and pull it out of the main window to create a separate floating window.
We have a native application that we're porting parts of to the web. Currently we have the ability to take some of the windows and drag them out of the main window to create a separate window. We would like to support something similar to that in our web based version of the app.
We're not currently tied to any particular javascript framework for the UI, so any insight into the current state of Web UI frameworks with respect to this functionality would be appreciated.
350
It really depends on what you want to achieve, but here is a blunt example with jQuery:
function popup(id) {
$('#' + id + '-pop').prop('disabled', true);
var popup = window.open('', 'popup', 'resizable=yes');
var content = $('#' + id).detach();
$(popup.document.body).append(content);
popup.onbeforeunload = function() {
$('#' + id + '-pop').prop('disabled', false);
content.appendTo($('#' + id + '-parent'));
};
}.tearable-parent {
border: 1px #000 solid;
display: inline-block;
padding: 5px;
margin: 5px;
}
button {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="t1-parent" class="tearable-parent">
<div id="t1">
<span>This is tearable.</span>
</div>
</div>
<button id="t1-pop" onclick="popup('t1')">Pop me up</button>
</body>You can not run the example here, as popup is not allowed, but here is a fiddle link where you can try it. When you close the popup, it moves the content back. Please note that you may need your own extra wiring if you are planning to move dynamic content around.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
