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 重寫默認值對象。