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

Question

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

通过使用鼠标拖动窗格边缘,窗格应该可以调整大小(请参见上图中的箭头).

在内容溢出的情况下,各个窗格应具有垂直滚动条,即没有全局浏览器窗口滚动条.

使用jQuery和jQuery UI Resizable,我创建了这个(部分工作)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布局中使用过.

这是一个几乎是旧项目(6年前),但在2014年中期,即使2014年9月之后没有更多信息,它的开发也会重新开始.

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

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

方案2:

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

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

它是jQuery UI的一种替代品,有一些类似的小部件(对话框,手风琴......)和一些独有的东西,比如布局模块,已在我的答案中链接.

选项3:前一个模拟解决方案是Zino UI,另一个完整的UI框架,具有专用于" 拆分布局 " 的特定组件

选项4: jQWidgets是另一个库,具有与之前类似的目的,特别是可能是有趣的jqxSplitter模块.

相关替代方案(相似):

还有另一种选择,它允许在浏览器窗口中切片面板,但另外允许拖放单个面板创建不同的选项卡,以及并排的子窗口.

这称为黄金布局.它与以前的不同,由于许多原因也更加强大,但目前它还没有Touch支持 ......

Answer 2

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

这些已在此Fiddle中修复

问题是：

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

通过设置初始宽度（百分比）来修复

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

无法重现

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

通过在调整大小期间将 left 设置为 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 3

如果你寻找比jEasy UI更简约的东西,我找到了一个似乎可以接受这个要求的东西.:)

• http://w2ui.com/web/demo/layout
• 这也不是死的项目; 似乎仍然活跃在github上https://github.com/vitmalina/w2ui/,这很不错.

我试试看.只是想分享这个,希望能够节省其他搜索时间.