Question

我正在尝试创建webapp的整体布局。该应用程序是全屏的，有一个固定的标题和三列/窗格。中心窗格由两行组成：

app wireframe layout

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

如果内容溢出，单个窗格应该有垂直滚动条，也就是说，没有全局浏览器窗口滚动条。

使用jQuery和jQuery UI Resizable，我创建了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 Layout插件，但据我所知，它并没有提供我所追求的布局。另外，我希望尽可能简单。

此外，我尝试了Methvins splitter插件，但无法使其正常工作。

我的问题：

有关如何在jQuery UI Resizable图像中创建布局的任何建议以及我在JSFiddle中的内容

Answer 1

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

选项1 ：

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

这是一个几乎是旧项目（6年前），但是在2014年中期，即使2014年9月之后没有更多信息，也会重新启动它。

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

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

选项2 ：

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

[...]可以帮助您轻松构建网页

它取代了 jQuery UI ，其中包含一些类似的小部件（对话框，手风琴......）以及我的答案中已经链接的独有内容，如Layout module。

选项3 ：前一个模拟解决方案是Zino UI，另一个完整的UI框架，其中包含一个专用于“Split Layout”的特定组件

选项4 ： jQWidgets是另一个库，具有与之前类似的目的，具体而言可能是有趣的jqxSplitter模块。

相关替代方案（类似）：

还有另一种选择，它允许在浏览器窗口中切片面板，但另外允许拖放单个面板创建不同的标签和并排的子窗口。

这称为Golden Layout。它与以前的不同，由于许多原因也更强大但目前肯定它没有触摸支持 ......

Answer 2

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

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

我试一试。只是想分享这个，希望能够节省其他人的搜索时间。

Answer 3

有一些小问题导致了你不喜欢的行为。

这些已在此Fiddle

中修复

问题是：

调整左侧时，右侧也会调整大小（不应该调整大小）

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

来修复

将左侧调整为全宽时，中心内容隐藏在右侧

下

无法重现

调整大小时，包装器（紫红色）是部分可见中心底部通过中心顶部调整大小，不是通过它自己的顶部

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

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

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

这是因为JQuery UI Resizable使用相对定位，这在表格单元格中不起作用。通过添加处理调整大小的内容div来修复。

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

Answer 4

我正在使用这个插件用jquery

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

Answer 5

我自己想出了答案，虽然最后我花了一年多的时间才开发出来！结果是使用jQuery和jQuery UI小部件工厂构建的现代，响应式面板布局小部件。

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

问题被提出时最好的解决方案无疑是jQuery UI.Layout，但随着时间的推移，该项目停滞不前，插件无法与jQuery 2一起使用。尽管代码在GitHub上发布，但它的命运未知，使用它作为长期项目可疑的基础。

此处发布的其他一些链接现在已经过时，如果您不想要或不需要完整的应用程序框架，那么您的选择是有限的。

Answer 6

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

Answer 7

好的，希望我上次编辑。经历了一堆这些，最终得到了jQuery UI布局。

Goldenlayout很不错，但你必须通过javascript在每个窗格中添加html。如果你已经在反应组件中得到了所有的东西，我想这可能没问题，但不适合我的用例。

jQuery UI布局似乎非常强大，并且刚刚在2014年更新。

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

7 个答案: