通過 $.fn.layout.defaults 重寫默認的 defaults。
布局(layout)是有五個區(qū)域(北區(qū) north、南區(qū) south、東區(qū) east、西區(qū) west 和中區(qū) center)的容器。中間的區(qū)域面板是必需的,邊緣區(qū)域面板是可選的。每個邊緣區(qū)域面板可通過拖拽邊框調(diào)整尺寸,也可以通過點擊折疊觸發(fā)器來折疊面板。布局(layout)可以嵌套,因此用戶可建立復(fù)雜的布局。
依賴 panel resizable
用法 創(chuàng)建布局(Layout)
1、通過標記創(chuàng)建布局(Layout)。
添加 'easyui-layout' class 到 <div> 標記。
<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',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>
2、在整個頁面上創(chuàng)建布局(Layout)。
<body class="easyui-layout">
<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>
</body>
3、創(chuàng)建嵌套布局。
請注意,內(nèi)部布局的西區(qū)面板是折疊的。
<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:true" style="width:180px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</body>
4、通過 ajax 加載內(nèi)容。
布局(layout)是基于面板(panel)創(chuàng)建的。各區(qū)域面板提供從 URL 動態(tài)加載內(nèi)容的內(nèi)建支持。使用動態(tài)加載技術(shù),用戶可以讓他們的布局頁面更快地顯示。
<body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
<div data-options="region:'center',href:'center_content.php'" ></div>
</body>
折疊布局面板(Collpase Layout Panel)
$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');
通過工具按鈕添加西區(qū)面板
$('#cc').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')}
}]
});
布局選項(Layout Options)
二、使用案例 1.從遠程站點加載數(shù)據(jù)
例 1 使用panel方法:
<div id="Layout" class="easyui-layout" style="width: 100%;height:20%; overflow:auto;" >
<div id="editorTB" style="width: 100%;height:20%;overflow:hidden;margin:0;" data-options="region:'center',fit:true, ">
</div>
</div>
function getFarTableData() {
$('#Layout').layout('panel', 'center').panel('refresh','table.HTML');
}
或
function getFarTableData() {
$('#Layout').layout('panel', 'center').panel({href:'table.HTML'});
}
例 2 使用add方法:
<div id="Layout" class="easyui-layout" style="width: 100%;height:20%; overflow:auto;" >
</div>
function getFarTableData() {
$('#Layout').layout('add', {
region : 'center',
href:'table.HTML',
}))
}
更多建議: