最近在学习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