Layout( 布局)

一． 加载方式
//class 加载方式
<div id="box" 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',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>
//JS 加载调用
$('#box').layout({
fit : true,
});

 

二． 布局属性

//属性设置
$('#box').layout({
fit : true,
});

 

三． 区域面板属性

区域面板属性定义与 panel 组件类型，下面是公共和新增的属性

<div data-options="
region:'north',
title:'North Title',
split:true,
border:false,
iconCls:'icon-save',
href:'content.html',
collapsible:false,
maxHeight:200"
style="height:100px;">
</div>

 

四．方法列表

//返回指定面板
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 重写默认值对象。