0

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

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

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

带有停靠区域的浏览器窗口 单击取消停靠

未停靠的单独窗口

没有停靠窗口的浏览器窗口

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

布局模板示例

4

1 回答 1

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 页面中。

于 2016-05-23T13:31:01.727 回答