easyUI Layout
@author YHC
覆蓋默認屬性$.fn.layout.defaults
layout是一個容器,它有5個區域:north(北丐),south(南帝),east(東邪),west(西毒),center(中神通),像不像金庸的天龍八部,中間區域的panel是必須的,
周邊區域panel是可選項,所有周邊區域的panel可以改變大小通過拖動邊框,他們也可以摺疊(collapse)通過點擊觸發摺疊事件,佈局可以嵌套,因此用戶
可以創建你想要的複雜佈局;
使用示例
創建 Layout
1.通過標記創建layout.
記得添加"easyui-layout"樣式給div標記.
- <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
- <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
- <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
- <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
- <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
- </div>
- <body class="easyui-layout">
- <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
- <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
- <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
- <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
- </body>
注意那個west panel的內部的佈局是摺疊的.
- <body class="easyui-layout">
- <div data-options="region:'north'" style="height:100px"></div>
- <div data-options="region:'center'">
- <div class="easyui-layout" data-options="fit:true">
- <div data-options="region:'west',collapsed:true" style="width:180px"></div>
- <div data-options="region:'center'"></div>
- </div>
- </div>
- </body>
這個layout的創建是基於panel的,所有內部區域panel提供內置支持通過"URL"異步加載內容,使用異步加載技術,用戶可以是他們的layout頁面顯示快了很多.
- <body class="easyui-layout">
- <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
- <div data-options="region:'center',href:'center_content.php'" ></div>
- </body>
摺疊 Layout Panel
- $('#cc').layout();
- // 摺疊west panel
- $('#cc').layout('collapse','west');
添加west 區域panel 工具按鈕
- $('#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 選項
| Name | Type | Description | Default |
|---|---|---|---|
| fit | boolean | 設置爲true設置layout的大小適應父容器大小.當創建layout 在body標籤上的時候,它將自動調整大小爲最大填滿整個頁面. | false |
Region Panel 選項
region panel 選項 是定義在panel組件, 下面是一些常用和新增的屬性:
| Name | Type | Description | Default |
|---|---|---|---|
| title | string | layout panel標題文本. | null |
| region | string | 定義 layout panel 位置, 這個值是下面其中的一個: north, south, east, west, center. | |
| border | boolean | True 顯示 layout panel 的邊框(border). | true |
| split | boolean | True 顯示分割條,通過此屬性用戶可以改變panel的大小. | false |
| iconCls | string | 一個 icon CSS 樣式,用來展示一個icon在panel的頭部. | null |
| href | string | 一個URL從一個遠程的站點加載數據. | null |
方法
| Name | Parameter | Description |
|---|---|---|
| resize | none | 設置 layout 大小. |
| panel | region | 返回特性的 panel, 這個 'region'參數的可用值有:'north','south','east','west','center'. |
| collapse | region | 摺疊特定的panel,這個 'region'參數的可用值有:'north','south','east','west'. |
| expand | region | 展開一個特定的 panel, 這個 'region' 參數的可用值有:'north','south','east','west'. |
| add | options | 添加一個定義panel, 這個options參數是一個配置對象, 請見tab panel 屬性得到更多詳細信息. |
| remove | region | 移除一個特定的 panel, 這個'region' 參數的可用值有:'north','south','east','west'. |