<!-- 左 -->
<div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>
<!-- 中 -->
<div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div>
</div>
我们可以为其添加js的属性：
<script>
$(function(){
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$('#layoutID').layout("collapse","south");
//将北边展开
$('#layoutID').layout('expand','north');
//将南边展开
window.setTimeout(function(){
$("#layoutID").layout("expand","south");
},3000);
},3000);
});
</script>对于布局来说，当然也还是可以进行嵌套处理的，我们可以摘除掉我们不需要的部分，然后将需要的部分进行再次组装。
<div id="layoutID" class="easyui-layout" data-options="fit:true" >
<div data-options="region:'north',border:false" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true" >
<div data-options="region:'west',border:false" style="width:180px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'south'" ></div>
</div>
</div>
</div>
</div>
</div>效果如下：
4.2 面板的使用
第一种方式：通过标签直接创建。
<div
id="panel"
class="easyui-panel"
title="我的第一个面板"
data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true"
style="width:800px;height:300px;padding:15px"
>
easyui入门
</div>第二种方式：
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
<script>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]});
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
