使用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 它易於使用，功能強大。