快捷導(dǎo)航

jQuery布局插件UI Layout簡(jiǎn)介及使用方法

更新時(shí)間：2013年04月03日 14:12:43 作者：

UI Layout是一種基于jQuery的布局框架，其核心是一個(gè)大小自適應(yīng)的中心面板，面板的上下左右四個(gè)方向可以放置可折疊、可縮放的面板，感興趣的朋友可以參考下哈

UI Layout是一種基于jQuery的布局框架，項(xiàng)目主頁http://layout.jquery-dev.net/。該框架的參考原型是ExtJS的border-layout，因此十分適用于將原有使用ExtJS的項(xiàng)目改造成jQuery項(xiàng)目。其核心是一個(gè)大小自適應(yīng)的中心面板（必選），面板的上下左右四個(gè)方向可以放置可折疊、可縮放的面板（可選），各個(gè)面板可以添加任意數(shù)量的頁眉和頁腳面板。UI Layout支持內(nèi)層布局的嵌套，任意塊元素都可以當(dāng)作布局的容器，最基本的布局容器是body。

基本使用方法：獲取容器元素并調(diào)用layout方法，傳入配置參數(shù)（可選）options即可：
$('body').layout( [options] );通常保留布局的引用，以便于進(jìn)一步通過代碼控制布局的形態(tài)。

復(fù)制代碼代碼如下:

 
var myLayout = $('body').layout(); 
// 讀取布局配置選項(xiàng) 
var is_west_resizable = myLayout.options.west.resizable; 
var north_maxHeight = myLayout.options.north.maxSize; 
// 調(diào)用布局函數(shù) 
myLayout.toggle("north"); 
myLayout.sizePane("west", 300); 
// 調(diào)用布局工具 
myLayout.addPinBtn("#myPinButton", "west"); 
myLayout.allowOverflow("north"); 

所有面板基于現(xiàn)有的HTML元素，而面板的附屬組件（縮放器和折疊開關(guān)）是自動(dòng)生成的div元素，并且加上了對(duì)應(yīng)的class屬性。幾乎所有的面板元素都必須是容器元素的直接子元素，form容器是一個(gè)例外。我們可以為相應(yīng)的HTML元素賦予默認(rèn)的類名，或者自定義的類名、id，來指定布局面板。下面舉個(gè)直觀的例子：

復(fù)制代碼代碼如下:

 
$(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__paneSelector: ".ui-layout-north"http://默認(rèn)配置，可省略 
, south__paneSelector: ".myclass-south" 
/* 
center pane is a 'child of the first form' 
default-selector shown just for reference 
*/ 
, center__paneSelector: ".ui-layout-center"http://默認(rèn)配置，可省略 
}); 
}); 

對(duì)應(yīng)的頁面：

復(fù)制代碼代碼如下:

 
<body> 
<!-- 'north' & 'south' are children of body --> 
<div class="ui-layout-north">north</div> 
<div class="myclass-south">south</div> 
<!-- 'center' is nested inside a form --> 
<form> 
<div class="ui-layout-center">center</div> 
</form> 
<!-- 'east' & 'west' are nested inside a div --> 
<div> 
<div id="west">west</div> 
<div id="east">east</div> 
</div> 
</body> 

在本例中，布局容器是body，南、北面板是容器的直接子元素，南面板使用自定義類名“myclass-south”，需要在布局參數(shù)south__paneSelector中指定jQuery選擇器；北面板使用默認(rèn)類名“ui-layout-north”。東、西面板不是容器的直接子元素，需要指定id才能識(shí)別（不可以用類選擇器），并且在布局參數(shù)“west__paneSelector”中指明對(duì)應(yīng)的id。中心面板嵌套在form中，此時(shí)面板可以使用默認(rèn)類名或自定義類名來識(shí)別。當(dāng)一個(gè)面板滿足下列兩個(gè)條件時(shí)才可以使用自定義類選擇器，否則只能用id選擇器來識(shí)別：1、面板是form的直接子元素2、該form是容器的直接子元素，并且是容器中的第一個(gè)form。

面板之間的空隙構(gòu)成了面板的邊，邊的概念是相對(duì)于上下左右方向的面板而言的，由于可以設(shè)置拖動(dòng)面板的邊實(shí)現(xiàn)對(duì)應(yīng)面板的縮放，所以稱這些邊為“縮放器”；縮放器上面通常附加一個(gè)折疊開關(guān)負(fù)責(zé)面板的折疊與打開。當(dāng)兩個(gè)面板之間沒有空隙時(shí)，縮放器和折疊開關(guān)隨之消失。面板打開和折疊狀態(tài)下，縮放器的寬度可以分別指定為不同的值。上例的效果圖如下：