最近在學習jQuery EasyUI，發現中文的文檔好少，部分文檔不錯但它是鳥語的，為了大家也為了自己學習吧，漢化做一下筆記。
有沒有說清楚的，或者翻譯不正確的地方還請大家諒解指出。。
由於工作時間原因，每天翻譯一點，最后會整理出一套幫助文檔發布給大家，一起期待哈。。
還有。。。贊一下了哈~打字很累的。。(*^_^*)
Layout
覆蓋默認值 $.fn.layout.defaults.
布局，最多可以有五個區域的容器：north(北), south(南), east(東), west(西) 和 center(中間)，center 中間的區域是必須的，但是面板邊緣區域的面板是可選的。
每一個邊緣區域面板都可以通過拖動邊框來調整大小，他們還可以通過點擊 收縮/展開 按鈕將其 收縮/展開。
布局可以嵌套，從而使用戶可以構建自己需要的復雜的布局。
依賴關系
- panel
- resizable
用法示例
創建布局
1. 通過HTML標記創建布局。
為<div/>標簽添加 'easyui-layout' 類：
1 <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 2 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 3 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 4 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 5 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> 6 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 7 </div>
2. 在整個頁面創建Layout布局：
1 <body class="easyui-layout"> 2 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 3 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 4 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 5 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> 6 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 7 </body>
3. 創建嵌套布局。
請注意，里面的 west(西部的) 布局是展開的：
1 <body class="easyui-layout"> 2 <div data-options="region:'north'" style="height:100px"></div> 3 <div data-options="region:'center'"> 4 <div class="easyui-layout" data-options="fit:true"> 5 <div data-options="region:'west',collapsed:true" style="width:180px"></div> 6 <div data-options="region:'center'"></div> 7 </div> 8 </div> 9 </body>
4. 使用Ajax加載內容。
Layout是基於 panel 面板創建的。各地區的panel面板提供了異步加載內容的URL支持。使用異步加載技術，用戶可以使自己的布局頁面顯示地更加“快捷”。
1 <body class="easyui-layout"> 2 <div data-options="region:'west',href:'west_content.php'" style="width:180px" /> 3 <div data-options="region:'center',href:'center_content.php'" /> 4 </body>
收起Layout布局面板
1 $('#cc').layout(); 2 // collapse the west panel 3 $('#cc').layout('collapse','west');
向 west(西部的) panel 面板中添加工具按鈕
1 $('#cc').layout('add',{ 2 region: 'west', 3 width: 180, 4 title: 'West Title', 5 split: true, 6 tools: [{ 7 iconCls:'icon-add', 8 handler:function(){alert('add')} 9 },{ 10 iconCls:'icon-remove', 11 handler:function(){alert('remove')} 12 }] 13 });
布局選項
| 名稱 | 類型 | 描述 | 默認值 |
| fit | boolean | 設置為“true”來設置它布局大小，以適應它的父級容器。當在“body”標簽上創建布局Layout布局時，它將會自動最大化到整個頁面的大小。 | false |
區域面板選項
區域面板選項在panel面板中定義，一面是一些常用的屬性值：
| 名稱 | 類型 | 描述 | 默認值 |
| title | string | Layout布局中panel面板的標題文字。 | null |
| region | string | 定義Layout布局面板的位置，該值可以是下列之一：north(北), south(南), east(東), west(西), center(中). | |
| border | boolean | 設置為“true”則顯示Layout布局面板的邊框。 | true |
| split | boolean | 設置為“true”則顯示分隔符以使用戶可以改變panel面板的大小。 | false |
| iconCls | string | 一個icon圖標css的class類，用於在panel標題上顯示指定的圖標。 | null |
| href | string | 一個從遠程站點加載數據的URL。 | null |
方法
| 名稱 | 參數 | 描述 |
| 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面板，該參數是一個配置對象，詳細信息請參見Tab Panel屬性。 |
| remove | region | 刪除指定的面板，“region” 參數可能的值有：‘north'(北),'south'(南),'east'(東),'west'(西)。 |
[原創漢化，歡迎轉載學習，請注明出處：]
Ｑ空間：http://778078163.qzone.qq.com
博客園：http://www.cnblogs.com/LonelyShadow