想要使用 jquery layout ui 停靠和取消停靠应用程序的一部分答案

【问题标题】：Want to dock and undock portion of application using jquery layout ui想要使用 jquery layout ui 停靠和取消停靠应用程序的一部分
【发布时间】：2016-09-18 04:36:13
【问题描述】：

我研究这个问题已经很长时间了，这个话题在编码世界中的代表性似乎非常低。我在我的应用程序中使用 Jquery Layout UI，

http://layout.jquery-dev.com/

而且我们只有南窗格和中窗格。我希望能够“取消停靠”南窗格，类似于 devtools 如何从浏览器底部取消停靠并成为自己的窗口。即

我尝试检查 devTools 以查看是否可以从那里的可用代码中获得任何提示，但找不到任何有用的东西。有没有人对如何实现这一点有想法，或者是否有我可能以某种方式错过的在线代码示例？同样，我的应用程序正在使用 jquery 布局 UI，而 South 区域是我希望能够“取消停靠”并重新停靠的区域。

【问题讨论】：

标签： javascript jquery user-interface layout jquery-layout

【解决方案1】：

没有办法简单地“取消停靠”它。您必须创建一个单独的页面来显示您想要取消停靠的内容。

然后，您将创建一个按钮（使用 Javascript）首先删除页面的底部，然后打开一个弹出窗口，其中包含您刚刚删除的部分（单独的页面）。

创建起来并不难，但请记住，弹出窗口拦截器可能会阻止它。 Devtools 是浏览器的一部分，因此它们不受弹出窗口阻止程序的影响。

这是一个有效的 jsFiddle：https://jsfiddle.net/Loveu79d/

$("#popout").click(function() {
  $(".bottom").hide(); // You could also use jquery to remove the div from the DOM
  $(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
  window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});

html,
body {
  height: 100%;
}

.top {
  border-bottom: 1px solid #000;
}

.top, .bottom {
  height: 49%;
}

.fillpage {
  height: 100%;
 }

.bottom {
  color: #FFF;
  background: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="top">
  <h1>Top part</h1>
  <button id="popout">Open popup</button>
</div>

<div class="bottom">
  <h1>Bottom part</h1>
</div>

在这种情况下，我们有一个带有“底部”的红色底部 div。您必须创建一个仅包含该内容的单独页面，例如“bottom.html”。然后你拿我的代码，把那个页面放在 Javascript 部分，上面写着“http://www.google.com”。

如果您页面的底部包含已在客户端编辑过的内容，您将不得不使用 cookie 或数据库来存储这些修改，然后将它们加载到 bottom.html 页面中。

【讨论】：

因此，在我们的应用程序中，我们的底部有大量数据可以在客户端进行编辑，并带有可以编辑的更多信息选项卡。有没有办法将其镜像到新窗口中，而无需为其创建代码副本和新的缓存/数据库存储？并且可以对接回来吗？谢谢你回答顺便说一句
据我所知，没有办法将一个屏幕的一部分带到一个新屏幕上。也许您可以将该部分的完整 html 存储在 cookie 中，但是任何 javascript 变量等都会丢失。最好的方法是确保他们输入或更改的任何内容都存储在某个地方，然后随时可以调用。对接可以使用相同的机制，使用 ajax 加载相同的部分并将其插入回页面中。
所以以 devtools 为例，当您“取消停靠”它时，它们会创建所提供信息的整个第二个副本？如果是，您在哪里找到此信息？这是我所知道的唯一一个符合我要求的例子，所以我一直在尝试了解它是如何工作的。
Devtools 是浏览器的一部分，在处理网页时没有相同的限制。 Google 使用我们作为网络开发人员无法访问的功能。或者他们可以使用类似于我建议的东西，无论如何，值已经存储在应用程序内存中。 Firebug，Firefox 插件添加了类似的东西，他们有一个基于 javascript 的版本，也许看看？
谢谢你，我会试试你的建议，让你知道结果如何。