一、依賴於 Panel（面 板）組件和 resizable(調整大小)組件。
二、class加載方式
<div id="box" class="easyui-layout" style="height: 600px;width: 400px">
<div data-options="region:'north'" title="north" style="height: 100px;"></div>
<div data-options="region:'south'" title="south" style="height: 100px;"></div>
<div data-options="region:'west'" title="west" style="width: 100px"></div>
<div data-options="region:'east'" title="east" style="width: 100px"></div>
<div data-options="region:'center'" title="center"></div>
</div>
三、js加載方式
<div id="box" style="height: 600px;width: 400px">
<div data-options="region:'north',maxHeight:'200'"
border='false'
iconCls='icon-add'
title='north'
href="index.html"
collapsible="false"
style ="height: 100px;"></div>
<div data-options="region:'south'" title="south" style="height: 100px;"></div>
<div data-options="region:'west'" title="west" style="width: 100px"></div>
<div data-options="region:'east'" title="east" style="width: 100px"></div>
<div data-options="region:'center'" title="center"></div>
</div>
$(function () {
$("#box").layout({
//屬性
fit:true,//如果設置為 true，布局組件將自適應父容 易。當使用 body 標簽創建布局的時候，整 個頁面會自動最大。默認為 false。值為boolean
});
//方法
console.log($('#box').layout('panel', 'north'));//返回指定面板
$('#box').layout('collapse', 'north');//設置指定面板折疊,參數可用值有 ： 'north','south','east','west'。
$('#box').layout('expand', 'north');//設置指定面板展開,參數可用值有 ： 'north','south','east','west'。
$(document).click(function () { $('#box').layout().css('display', 'block'); $('#box').layout('resize'); });////重新調整布局和大小
$('#box').layout('add', { title : 'center title', region : 'center', });//新增一個面板
$('#box').layout('remove', 'north');////刪除指定面板
})