使用jQuery UI的可调整大小的窗格的完整页面布局

Question

我试图创建一个webapp的整体布局。该应用程序是全屏幕，并有一个固定的标题和三列/窗格。中心窗格包含两行：

的窗格应该通过拖动窗格用鼠标边缘可调整大小的（参见上文中的图像箭头）。

如果内容溢出，即没有全局浏览器窗口滚动条，单个窗格应具有垂直滚动条。

使用jQuery和jQuery UI可调整大小，我创建了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：

$(function() { 
    $(".left.pane").resizable({ 
     handles: "e, w" 
    }); 
    $(".right.pane").resizable({ 
     handles: "e, w" 
    }); 
    $(".center.pane .inner .bottom").resizable({ 
     handles: "n, s" 
    }); 
}); 

它有几个问题，包括：

• 当调整左，右也是大小（它不应该）
• 当左大小的调整对整个宽度，中心内容是对下隐藏
• 当调整右包装（紫红色颜色）是部分可见
• 底部中心通过中心顶部的顶部调整，而不是通过它自己的顶级

我知道了jQuery插件布局的，但就我所看到的，它不提供相当的布局我在之后。另外，我想尽可能保持简单。

此外，我已经尝试Methvins分配器插件，但无法让它工作。

我的问题：

为如何从jQuery UI的图像可调整的创建布局和我有什么在JSFiddle有什么建议？

Answer 1

还有更合适的插件，基于jQuery来获得你想要的。

OPTION 1：

我个人在我的项目UI Layout使用。

这是一个几乎老旧的项目（6年前），但在2014年中期开始重新开始，即使2014年9月之后没有更多信息。

实际上，上一个稳定版本是1.4.3，于14年9月发布。新的网站是：

• https://github.com/allpro/layout/

---

OPTION 2：

如果你需要一个更完整的解决方案，你可以想想jEasy UI，这是一个完整的框架，

帮助就是你轻松构建

网页这是一种替代jQuery UI的的，有一些类似的小部件（对话框，手风琴，...）和绝无仅有的东西，像Layout module，已经在我的答案链接。

---

OPTION 3： 模拟溶液与前一个，是Zino UI，其具有到专用的特定成分另一个完整UI框架 “分割布局”

---

方案4： jQWidgets是另一个库，与以前的目标类似。

---

相关替代（类似于）：

也有另一种替代方案，其允许切片在浏览器窗口面板但除了允许拖动&降单面板创建不同的标签，和并排的子窗口。

这叫做Golden Layout。这是与以往有所不同，原因是多方面的也比较厉害，但肯定此刻它没有触摸的支持 ...

Answer 2

我正在usign这个插件 与jQuery

http://www.bramstein.com/projects/jlayout/jquery-plugin.html

Answer 3

我找到一个似乎可以接受的要求，如果你寻找的东西比jEasy UI更简约。 ：）

• http://w2ui.com/web/demo/layout
• 而且它没有死的项目;似乎仍然活跃在github https://github.com/vitmalina/w2ui/，这很好。

我会试试看。只是想分享一下，希望能够节省其他搜索时间。

Answer 4

我自己想出了这个答案，尽管最终它花了我一年的时间！结果是使用jQuery和jQuery UI小部件工厂构建的现代，响应式面板布局小部件。

http://www.silvercore.co.uk/widgets/propanellayout/

在有人问，无疑是jQuery的UI.Layout，但随着时间的推移项目滞缓，插件不与jQuery 2.尽管代码工作时间的最佳解决方案被发布在GitHub上它的命运是未知的，这使得它成为长期项目可疑的基础。

这里发布的其他一些链接现在已经死了，如果你不想或不需要一个完整的应用程序框架，你的选择是有限的。

Answer 5

好的，希望我上次编辑。通过一堆这些，并最终与jQuery UI布局。

Goldenlayout是不错的，但你必须实际上通过JavaScript添加在每个窗格中的HTML。如果你已经掌握了所有的反应组件，我想这可能是好的，但不适合我的用例。

jQuery UI的布局似乎是相当强劲，并于2014年

Answer 6

刚才更新有导致你不喜欢的行为的一些小问题。

这些在此Fiddle

的问题进行了固定为：

当调整左，右也调整大小（它不应该）

通过设置一个初始宽度固定（以百分比表示）

调整大小向左全宽时，中心内容隐藏在右侧

无法重现

当调整右包装（紫红色色），部分 可见中心底部通过该中心顶部的顶部调整， 不是通过它自己的顶级

通过在调整大小期间将其设置为0来修复。

$(".right.pane").resizable({ 
    handles: "e, w", 
    resize: function(event, ui) { 
     ui.position.left = 0; 
    } 
    }); 

中心底部通过该中心顶部的顶部调整，而不是通过它自己的顶级

这是由于JQuery用户界面可调整使用相对定位不工作表单元格。通过添加处理调整大小的内容div来修复。

<div class="top pane"> 
    <div class="top-content">Center top</div> 
</div> 

Answer 7

您可以使用Gridstack 它易于使用，功能强大。