Geek Answers Handbook

Tear off widgets in a web environment?

Is it possible, and are there any frameworks that support tear-off widgets in a web browser? 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 our own application, which we transfer to the Internet. Currently, we have the opportunity to take some of the windows and pull them out of the main window to create a separate window. We would like to support something similar in our web version of the application.

We are currently not tied to any specific javascript structure for the user interface, so any understanding of the current state of the web user interfaces in relation to this function will be appreciated.

+6
source share
4 answers

It really depends on what you want to achieve, but here is an 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 cannot run the example here, since the popup is not allowed, but here is a link to the script where you can try. When you close the popup, it moves the contents back. Please note that you may need your extra posting if you plan on moving dynamic content.

+1
source

It is possible on the Internet.

I think this is a bad idea. That's why:

Pop-ups, the mechanism for new windows to appear, will potentially be blocked,

this is an unusual practice, so it will violate user expectations,

it may take time to work properly

An alternative would be to have virtual windows inside the web page, I mean to do something like this, except for using divs inside the page, which can be minimized and moved, but inside only the page

0
source

I agree with @Walle. The "virtual windows" approach is better than pop-ups. I would look at Sencha and their Ext JS platform: Sencha Ext JS

I have never used it myself since it is proprietary, however the demonstrations look very promising. Virtual windows displayed here: Website

0
source

If you port a Windows application to a web application (which I have been doing for the last couple of years), then there is nothing comparable to extjs on the market, especially if it is an enterprise application.

0
source

More articles:


All Articles