jQuery布局外掛程式UI Layout簡介

ui layout是一種基於jquery的布局框架，專案主頁該框架的參考原型是extjs的border-layout，因此十分適用於將原有使用extjs的專案改造成jquery專案。其核心是乙個大小自適應的中心面板（必選），面板的上下左右四個方向可以放置可折疊、可縮放的面板（可選），各個面板可以新增任意數量的頁首和頁尾面板。ui layout支援內層布局的巢狀，任意塊元素都可以當作布局的容器，最基本的布局容器是body。

基本使用方法：獲取容器元素並呼叫layout方法，傳入配置引數（可選）options即可：

$('body').layout( [options] );通常保留布局的引用，以便於進一步通過**控制布局的形態。

var mylayout = $('body').layout();
// 讀取布局配置選項
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() );   
});

對應的頁面：

north south west east

在本例中，布局容器是body，南、北面板是容器的直接子元素，南面板使用自定義類名「myclass-south」，需要在布局引數south__paneselector中指定jquery選擇器；北面板使用預設類名「ui-layout-north」。東、西面板不是容器的直接子元素，需要指定id才能識別（不可以用類選擇器），並且在布局引數「west__paneselector」中指明對應的id。中心面板巢狀在form中，此時面板可以使用預設類名或自定義類名來識別。當乙個面板滿足下列兩個條件時才可以使用自定義類選擇器，否則只能用id選擇器來識別：1、面板是form的直接子元素2、該form是容器的直接子元素，並且是容器中的第乙個form。

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

jQuery布局外掛程式UI Layout簡介

jQuery外掛程式之日曆外掛程式

jQuery常用外掛程式 cookie外掛程式

jQuery筆記（編寫jQuery外掛程式）

jQuery布局外掛程式UI Layout簡介

jQuery外掛程式之日曆外掛程式

jQuery常用外掛程式 cookie外掛程式

jQuery筆記（編寫jQuery外掛程式）

相關推薦