jquery-ui - 使用 jQuery UI 的带有可调整大小 Pane 的完整页面布局

Question

我正在尝试创建网络应用程序的整体布局。该应用程序是全屏的，具有固定标题和三个列/ Pane 。中心 Pane 由两行组成:

应通过用鼠标拖动 Pane 边缘来调整 Pane 的大小(请参见上图中的箭头)。

各个 Pane 应该有垂直滚动条，以防内容溢出，即没有全局浏览器窗口滚动条。

使用 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"
    });
});

它有几个问题，包括:

• 调整左侧大小时，右侧也会调整大小(这是不应该的)
• 将“左侧”调整为全宽时，中心内容将隐藏在“右侧”下方
• 向右调整大小时， wrapper (紫红色)部分可见
• 中心底部通过中心顶部的顶部调整大小，而不是通过它自己的顶部

我知道 jQuery 布局插件，但据我所知，它并没有提供我想要的布局。另外，我想让它尽可能简单。

此外，我尝试过Methvins splitter插件，但无法让它工作。

我的问题:

有关如何创建布局的任何建议，如 jQuery UI 可调整大小的图像以及我在 JSFiddle 中的内容。 ？

Answer 1

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

选项 1:

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

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

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

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

<小时/>

选项 2:

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

[...] helps you build your web pages easily

它是 jQuery UI 的一种替代品，带有一些类似的小部件(对话框、 Accordion 等)和一些专有的东西，例如 Layout module ，已经链接在我的答案中。

<小时/>

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

<小时/>

选项 4: jQWidgets是另一个库，与以前的库具有类似的目的，并且特别可能很有趣 jqxSplitter模块。

<小时/>

相关替代方案(类似):

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

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