4.1、easyui布局-layout
在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下:
<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>
4.2、add方法
$('#myDiv').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') }
}]
});
4.3、整个页面定义成layout
我们在创建layout布局的时候东(east)、南(south),西(west)、北(north)都可以不写，但是中(center)必须写。
假如我们想让整个页面都是layout布局，这样就不用考虑高度宽度等问题。如何做？我们只需要在body标签上面添加一个calss即可。代码如下：
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height: 50px">north</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 50px">south</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px">west</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px">east</div>
<div data-options="region:'center',title:'center title'">center</div>
</body>