easyUI layout布局

EasyUI Layout 布局

通過 $.fn.layout.defaults 重寫預設的 defaults。

布局（layout）是有五個區域（北區 north、南區 south、東區 east、西區 west 和中區 center）的容器。中間的區域面闆是必需的，邊緣區域面闆是可選的。每個邊緣區域面闆可通過拖拽邊框調整尺寸，也可以通過點選折疊觸發器來折疊面闆。布局（layout）可以嵌套，是以使用者可建立複雜的布局。

依賴

panel

resizable

用法

建立布局（Layout）

1、通過标記建立布局（Layout）。

添加 'easyui-layout' class 到

标記。

2、在整個頁面上建立布局（Layout）。

3、建立嵌套布局。

請注意，内部布局的西區面闆是折疊的。

4、通過 ajax 加載内容。

布局（layout）是基于面闆（panel）建立的。各區域面闆提供從 URL 動态加載内容的内建支援。使用動态加載技術，使用者可以讓他們的布局頁面更快地顯示。

折疊布局面闆（Collpase Layout Panel）

$('#cc').layout();

// collapse the west panel

$('#cc').layout('collapse','west');

通過工具按鈕添加西區面闆

$('#cc').layout('add',{

region:'west',

width:180,

title:'West Title',

split:true,

tools:[{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-remove',

handler:function(){alert('remove')}

}]

});

布局選項（Layout Options）

名稱類型描述預設值

fitboolean當設定為 true 時，就設定布局（layout）的尺寸适應它的父容器。當在 'body' 标簽上建立布局（layout）時，它将自動最大化到整個頁面的全部尺寸。false

區域面闆選項（Region Panel Options）

區域面闆選項（Region Panel Options）是定義在面闆（panel）元件中，下面是一些共同的和新增的屬性：

titlestring布局面闆（layout panel）的标題文本。null

regionstring定義布局面闆（layout panel）的位置，其值是下列之一：north、south、east、west、center。

borderboolean當設定為 true 時，就顯示布局面闆（layout panel）的邊框。true

splitboolean當設定為 true 時，就顯示拆分欄，使用者可以用它改變面闆（panel）的尺寸。false

iconClsstring在面闆（panel）頭部顯示一個圖示的 CSS class。null

hrefstring從遠端站點加載資料的 URL 。null

collapsibleboolean定義是否顯示可折疊按鈕。true

minWidthnumber面闆（panel）最小寬度。10

minHeightnumber面闆（panel）最小高度。10

maxWidthnumber面闆（panel）最大寬度。10000

maxHeightnumber面闆（panel）最大高度。10000

方法

名稱

參數描述

resizenone設定布局（layout）的尺寸。

panelregion傳回指定的面闆（panel），'region' 參數可能的值是：'north'、'south'、'east'、'west'、'center'。

collapseregion折疊指定的面闆（panel），'region' 參數可能的值是：'north'、'south'、'east'、'west'。

expandregion展開指定的面闆（panel），'region' 參數可能的值是：'north'、'south'、'east'、'west'。

addoptions添加一個指定的面闆（panel），options 參數一個配置對象，更多細節請參閱标簽頁面闆（tab panel）屬性。

removeregion移除指定的面闆（panel），'region' 參數可能的值：'north'、'south'、'east'、'west'。