使用jQuery UI的可调整窗格大小的完整页面布局 [英] A full page layout with resizable panes using jQuery UI
问题描述
我正在尝试创建Web应用程序的整体布局.该应用程序为全屏显示，并具有固定的标题和三列/窗格.中央窗格由两行组成:
I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:
应该通过使用鼠标拖动窗格边缘来调整窗格的大小(请参见上图中的箭头).
The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above).
在内容溢出的情况下，各个窗格应具有垂直滚动条，即没有全局浏览器窗口滚动条.
The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar.
使用jQuery和可调整大小的jQuery UI，我创建了这(部分工作) JSFiddle .
Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle.
HTML:
<div class="header">
Fixed header
</div>
<div class="wrapper">
<div class="inner-wrapper">
<div class="left pane">Left</div>
<div class="center pane">
<div class="inner">
<div class="top">Center top</div>
<div class="bottom">Center bottom</div>
</div>
</div>
<div class="right pane">Right</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
background-color: moccasin;
}
.wrapper {
position:absolute;
top: 21px;
right: 0;
bottom: 0;
left: 0;
background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
display: table;
width: 100%;
height: 100%;
}
.pane {
display: table-cell;
}
.left.pane {
background-color: olivedrab;
}
.center.pane {
background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
display: table-row;
}
.center.pane .inner .top {
background-color: lightcoral;
}
.center.pane .inner .bottom {
background-color: orange;
height: 100%;
width: 100%;
}
.right.pane {
background-color: #999;
}
JavaScript:
JavaScript:
$(function () {
$(".left.pane").resizable({
handles: "e, w"
});
$(".right.pane").resizable({
handles: "e, w"
});
$(".center.pane .inner .bottom").resizable({
handles: "n, s"
});
});
它有几个问题，包括:
- 调整左"的大小时，右"的大小也会调整(不应调整)
- 将左"调整为全角时，居中"内容隐藏在右"下
- 调整大小时，包装纸(紫红色)的部分可见
- 中心底部的大小是通过中心顶部的顶部调整的，而不是通过自己的顶部
我知道jQuery Layout插件，但是据我所知，它并没有提供我想要的布局.另外，我想使其尽可能简单.
I'm aware of the jQuery Layout plugin, but as far as I can see, it doesn't offer quite the layout I'm after. Also, I want to keep it as simple as possible.
此外，我已经尝试过Methvins splitter插件，但是无法正常工作.
Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.
我的问题:
关于如何从jQuery UI Resizable中创建图像中布局的任何建议以及 JSFiddle ?
Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the JSFiddle?
推荐答案
还有更多合适的插件，基于jQuery来获取您想要的.
There are more appropriate plugins, based on jQuery to obtain what you want.
选项1 :
我在项目 UI布局 中亲自使用过.
I personally used in a my project UI Layout.
这是一个几乎是古老的项目(6年前)，但是在2014年中重新开始开发，即使在2014年9月之后没有更多信息了.
It is an almost old project (6 years ago), but in mid-2014 its development is re-started, even if there are no more information after september 2014.
实际上，最后一个稳定版本是1.4.3，于14年9月发布.新网站是:
Actually, last stable version is 1.4.3, released in sept '14. New website is:
选项2 :
如果您需要更完整的解决方案，可以考虑 jEasy UI ，这是一个完整的框架，
If you need a more complete solution, you could think about jEasy UI, that is a complete framework that
[...]可帮助您轻松构建网页
[...] helps you build your web pages easily
它是 jQuery UI 的一种替代，具有一些类似的小部件(对话框，手风琴等)和某些专有内容，例如
It is a sort of replacement of jQuery UI, with some similar widgets (dialogs, accordions, ...) and something exclusive, like Layout module, already linked in my answer.
选项3 : 与上一个类似的解决方案是 Zino UI ，另一个完整的UI框架，具有专门用于"> 拆分布局 "
OPTION 3: Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"
选项4 : jQWidgets 是另一个库，具有与先前库相似的目的，并且特别有趣
OPTION 4: jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.
相关替代项(相似):
还有另一种选择，它允许在浏览器窗口中分割面板，但还允许拖放单个面板以创建不同的选项卡，以及并排的子窗口.
There is also another alternative, that allows to slice panels in the browser windows but in addition allows to drag&drop single panels creating different tabs, and side-by-side sub-windows.
这称为 金色版式 .它与以前的版本有所不同，由于许多原因，它们也更强大，但现在肯定它不支持Touch ...
这篇关于使用jQuery UI的可调整窗格大小的完整页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
