> 布局组件依赖于 Panel（面板）组件和 resizable(调整大小)组件。 # 加载方式 ## Class加载 ``` <div id="box" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'北部 Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'南部 Title',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'西部',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'东部',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'中间 title'" style="padding:5px;background:#eee;"></div> </div> ```  ## JS调用加载 ``` $('#box').layout({ fit : true, }); ``` # 布局属性 | 属性名 | 值 | 说明 | | --- | --- | | fit| boolean| 如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。| # 区域面板属性 > 区域面板属性定义与 panel 组件类型，下面是公共和新增的属性： | 属性名 | 值 | 说明 | | --- | --- | | title | string | 布局面板标题文本。默认值 null。| | region | string| 定义布局面板位置，可用的值有：north,south, east, west, center。默认值空。| | border | boolean | 为 true 时显示布局面板边框。默认值 true。| | split | boolean | 为 true 时用户可以通过分割栏改变面板大小。默认值 false。| | iconCls | string | 一个包含图标的 CSS 类 ID，该图标将会显示到面板标题上。默认值 null。| | href | string | 用于读取远程站点数据的 URL 链接。默认值null。| | collapsible | boolean | 定义是否显示折叠按钮。默认值 true。| | minWidth | number | 最小面板宽度。默认值10。| | minHeight| number | 最小面板高度。默认值10。| | maxWidth | number | 最大面板宽度。默认值10000。| | maxHeight | number | 最大面板高度。默认值10000。| *** ``` <div data-options=" region:'north', title:'北部', split:true, border:true, iconCls:'icon-save', href:'content.html', collapsible:false, maxHeight:200" style="height:100px;"> </div> ``` # 方法列表 | 方法名 | 参数 | 说明 | | --- | --- | | resize| none | 设置布局大小。| | panel | region | 返 回 指 定 面 板 ， 'region' 参 数 可 用 值 有 ：'north','south','east','west','center'。| | collapse | region | 折 叠 指 定 面 板 。 'region' 参 数 可 用 值 有 ：'north','south','east','west'。| | expand| region | 展 开 指 定 面 板 。 'region' 参 数 可 用 值 有 ：'north','south','east','west'。| | add | options | 添加指定面板。属性参数是一个配置对象，更多细节请查看选项卡面板属性。| | remove | region | 移 除 指 定 面 板 。 'region' 参 数 可 用 值 有 ：'north','south','east','west'。| *** ``` //返回指定面板 console.log($('#box').layout('panel', 'north')); //设置指定面板折叠 $('#box').layout('collapse', 'north'); //设置指定面板展开 $('#box').layout('expand', 'north'); //重新调整布局和大小 $(document).click(function () { $('#box').layout().css('display', 'block'); $('#box').layout('resize'); }); //新增一个面板 $('#box').layout('add', { title : 'center title', region : 'center', }); //删除指定面板 $('#box').layout('remove', 'north'); //使用$.fn.layout.defaults 重写默认值对象。 ```