javascript - 想要使用 jquery 布局 ui 停靠和取消停靠应用程序部分

Question

我已经研究这个问题很长时间了，这个主题在编码世界中似乎很少被提及。我在我的应用程序中使用 Jquery 布局 UI，

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

我们只有南 Pane 和中 Pane 。我希望能够“取消停靠”南 Pane ，就像开发工具从浏览器底部取消停靠并成为其自己的窗口一样。即

我尝试检查 devTools 以查看是否可以从可用代码中获得任何提示，但无法找到任何有用的东西。有谁知道如何实现这一点，或者网上是否有我可能错过的代码示例？同样，我的应用程序使用 jquery 布局 UI，其中南部区域是我希望能够“取消停靠”并停靠回来的区域。

Answer 1

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

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

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

这是一个正在运行的 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 页面中。