jQuery佈局外掛UI Layout簡介及使用方法_jquery

UI Layout是基於jQuery的佈局框架，專案首頁http://layout.jquery-dev.net/。此框架的參考原型是ExtJS的border-layout，因此十分適用於將原有使用ExtJS的專案改造成jQuery專案。其核心是一個大小自適應的中心面板（必選），面板的上下左右四個方向可以放置可折疊、可縮放的面板（可選），各個面板可以添加任意數量的頁眉和頁腳面板。 UI Layout支援內層佈局的嵌套，任一塊元素都可以當作佈局的容器，最基本的佈局容器是body。

基本使用方法：取得容器元素並呼叫layout方法，傳入配置參數（可選）options即可：
$('body').layout( [options] );通常保留佈局的引用，以便於進一步透過程式碼控制佈局的形態。

複製程式碼 程式碼如下:

var myLayout = $('body').layout('body').layout('body').layout('body').layout('body').layout('body').layout('body'). );
// 讀取版面配置選項
var is_west_resizable = myLayout.options.west.resizable;
var north_maxHeight = myLayout.options.north.maxSize
; >myLayout.toggle("north");
myLayout.sizePane("west", 300);
// 呼叫佈局工具
myLayout.addPinBtn("#myPinButton", "west"); 🎜>myLayout.allowOverflow("north");


所有面板都基於現有的HTML元素，而面板的附屬組件（縮放器和折疊開關）是自動產生的div元素，並且加上上了對應的class屬性。幾乎所有的面板元素都必須是容器元素的直接子元素，form容器是例外。我們可以為對應的HTML元素賦予預設的類別名，或是自訂的類別名稱、id，來指定佈局面板。以下舉個直覺的例子：

複製程式碼 程式碼如下:

$(document). ready(function() {

$("body").layout({
/*
east & west panes require 'ID' selectors
because they are 'nested inside a div'
*/
west__paneSelector: "#west"
, east__paneSelector: "#east"
/*
north & south panes are 'children of body'
*/
, north__pan : ".ui-layout-north"//預設配置，可省略
, south__paneSelector: ".myclass-south"
/*
center pane is a 'child of the first form'
default-selector shown just for reference
*/
, center__paneSelector: ".ui-layout-center"//預設配置，可省略
});
});


對應的頁面：

複製程式碼 程式碼如下:

north

south

center div>

west

east

在本例中，佈局容器是body，南、北面板是容器的直接子元素，南面板使用自訂類別名稱“myclass-south”，需要在佈局參數south__paneSelector中指定jQuery選擇器；北面板使用預設類別名稱“ui-layout-north” 。東、西面板不是容器的直接子元素，需要指定id才能辨識（不可以用類別選擇器），並且在佈局參數「west__paneSelector」中指明對應的id。中心面板嵌套在form中，此時面板可以使用預設類別名稱或自訂類別名稱來識別。當一個面板滿足下列兩個條件時才可以使用自訂類別選擇器，否則只能用id選擇器來識別：1、面板是form的直接子元素2、該form是容器的直接子元素，並且是容器中的第一個form。

面板之間的空隙構成了面板的邊，邊的概念是相對於上下左右方向的面板而言的，由於可以設置拖動面板的邊實現對應面板的縮放，所以稱這些邊為「縮放器」；縮放器上面通常附加一個折疊開關負責面板的折疊與打開。當兩個面板之間沒有空隙時，縮放器和折疊開關隨之消失。面板打開和折疊狀態下，縮放器的寬度可以分別指定為不同的值。上例的效果圖如下：