布局的容器,有五个区域:北部,南部,东部,西部和中心。的中心区域的面板是必需的,但边缘区域的面板是可选的。每一个边缘区域面板可以调整大小,拖动其边界,他们也可以折叠一下它的崩溃触发。可以嵌套的布局,从而用户可以建立他想要什么复杂的布局。
继承: 面板(panel)、可调整大小(resizable)
用法示例
创建布局
1、通过标记创建布局。添加'easyui的布局类的标记的<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>
2、创建整个页面的布局。
<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>
3、创建嵌套布局。注意,西部面板布局内收缩。
<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>
4、内容加载使用ajax创建基于面板的布局。每个区域面板提供内置支持异步加载内容从URL。使用异步加载技术,用户可以使他们的页面布局显示更多更快。
<body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width:180px" />
<div data-options="region:'center',href:'center_content.php'" />
</body>
Collpase布局面板
$('#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')}
}]
});
布局选项
Name | Type | 描述 | 默认值 |
fit | boolean | 设置为true,以适应它的父容器设置布局大小。当创建布局“体”标记时,它会自动最大化整个页面的完整大小 | false |
地区面板选项,该地区的控制面板选项中定义的面板组件,下面是一些常见的和增值的属性:
Name | Type | 描述 | 默认值 |
title | string | 布局面板的标题文字。 | null |
region | string | 定义布局面板的位置,该值是下列之一:北,南,东,西,中心。 | |
border | boolean | 真正的显示布局面板边框。 | true |
split | boolean | 真正显示拆分栏,用户可以改变面板的大小。 | false |
iconCls | string | 一个图标CSS类显示面板上的头一个图标。 | null |
href | string | 一个URL加载数据从远程站点。 | null |
collapsible | boolean | 定义是否显示可折叠按钮。 | true |
minWidth | number | 最小面板宽度。 | 10 |
minHeight | number | 面板的最小高度。 | 10 |
maxWidth | number | 的最大面板宽度。 | 10000 |
maxHeight | number | 最大面板高度。 | 10000 |
方法:
Name | 参数 | Description |
resize | none | 设置布局大小。 |
panel | region | 返回指定的面板,'区域'参数可能的值:'北','南','东','西','中心'。 |
collapse | region | 关闭指定的面板,'区域'参数可能的值:'北','南','东','西'。 |
expand | region | 展开指定的面板,'区域'参数可能的值:'北','南','东','西'。 |
add | options | 添加一个指定的面板,选项参数是一个配置对象,标签面板属性,更多的细节。 |
remove | region | 删除指定的面板,'区域'参数可能的值:'北','南','东','西'。 |