jquery easy ui 1.3.4 布局layout(4)
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>