使用 jQuery UI 具有可调整大小的窗格的完整页面布局 [英] A full page layout with resizable panes using jQuery UI

问题描述

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

应该通过用鼠标拖动窗格边缘来调整窗格的大小(见上图中的箭头).

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

使用 jQuery 和 jQuery UI Resizable，我创建了 这个(部分工作)JSFiddle.

HTML:

固定标题
<div class="wrapper"><div class="inner-wrapper"><div class="左窗格">左</div><div class="中心窗格"><div class="inner"><div class="top">中心顶部</div><div class="bottom">中心底部</div>

<div class="右窗格">右</div>

CSS:

html, body {高度:100%；}.header {位置:固定；顶部:0；左:0；右:0；高度:20px；背景颜色:莫卡辛；}.包装{位置:绝对；顶部:21px；右:0；底部:0；左:0；背景颜色:紫红色；}.内包装，.center.pane .inner {显示:表；宽度:100%；高度:100%；}.窗格{显示:表格单元格；}.left.pane {背景颜色:橄榄色；}.center.pane {背景颜色:浅蓝色；}.center.pane .inner .top,.center.pane .inner .bottom{显示:表格行；}.center.pane .inner .top {背景色:浅珊瑚色；}.center.pane .inner .bottom {背景颜色:橙色；高度:100%；宽度:100%；}.right.pane {背景色:#999；}

JavaScript:

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

它有几个问题，包括:

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

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

此外，我尝试过 Methvins 拆分器插件，但无法使其正常工作.

我的问题:

关于如何创建布局的任何建议，如 jQuery UI Resizable 中的图像以及我在 JSFiddle?

解决方案

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

选项 1:

我个人在我的项目中使用了 UI 布局.

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

实际上，最后一个稳定版本是 14 年 9 月发布的 1.4.3.新网站是:

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

<小时>

选项 2:

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

<块引用>

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

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

<小时>

选项 3:上一个类似的解决方案是 Zino UI，另一个完整的 UI 框架，具有专门用于拆分布局"

<小时>

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

<小时>

相关替代方案(类似):

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

这称为黄金布局.它与以前的不同，出于多种原因也更强大，但目前肯定它不支持 Touch...

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.

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:

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

It has several issues, including:

• When resizing Left, Right is also resized (which it shouldn't)
• When resizing Left towards full width, Center content is hidden under Right
• When resizing Right the wrapper (Fuchsia-colored) is partly visible
• Center bottom is resized through the top of the Center top, not through it's own top

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.

Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.

My question:

Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the JSFiddle?

解决方案

There are more appropriate plugins, based on jQuery to obtain what you want.

OPTION 1:

I personally used in a my project UI Layout.

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.

Actually, last stable version is 1.4.3, released in sept '14. New website is:

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

---

OPTION 2:

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

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.

---

OPTION 3: Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"

---

OPTION 4: jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.

---

Related alternative (similar):

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.

This is called Golden Layout. It's different from previous ones, for many reasons also more powerful but surely at the moment it has not Touch support...

这篇关于使用 jQuery UI 具有可调整大小的窗格的完整页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！