撕掉web框架中的小部件

Tear off widgets in web framework?

本文关键字：小部 web 框架 撕掉      更新时间：2023-09-26

这可能吗？是否存在任何支持在web浏览器中删除小部件的框架？即，在Visual Studio中，您可以将任何窗口从主窗口中拉出，以创建一个单独的浮动窗口。

我们有一个本地应用程序，我们正在将其部分移植到web上。目前，我们可以将一些窗口从主窗口中拖出来，创建一个单独的窗口。我们希望在基于网络的应用程序版本中支持类似的功能。

我们目前没有与任何特定的UI javascript框架绑定，因此，如果您能深入了解Web UI框架在该功能方面的当前状态，我们将不胜感激。

这实际上取决于你想要实现什么，但这里有一个关于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>

你不能在这里运行这个例子，因为弹出窗口是不允许的，但这里有一个小提琴链接，你可以在那里尝试。当你关闭弹出窗口时，它会将内容移回。请注意，如果您计划四处移动动态内容，您可能需要自己的额外布线。

这在网络上是可能的。

我认为这是个坏主意。原因如下：

弹出窗口，产生新窗口的机制，可能会被阻止，

这是一种罕见的做法，因此它将打破用户的期望，

正常工作可能需要时间

另一种选择是在网页内设置虚拟窗口，我的意思是制作类似的东西，除了在页面内使用div，它可以最小化和移动，但在页面内只有

我同意@Walle的观点。"虚拟窗口"方法比使用弹出窗口要好。我会看看Sencha和他们的ExtJS平台：Sencha Ext JS

我自己从来没有使用过它，因为它是专有的，但是演示看起来很有前景。这里有一个显示"虚拟窗口"的窗口：Web桌面

如果你正在将一个windows应用程序移植到一个web应用程序（我在过去几年中一直这样做），那么市场上没有什么能与extjs相比，尤其是如果它是一个企业应用程序的话。

相关文章：