A, depending on the Panel (panel) assembly and resizable (resizing) component.
Two, class loading
<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>
Three, js loading
<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, // if set to true, the parent readily adaptive layout component. When creating a layout using a body tag, the entire page will automatically maximized. The default is false. Value Boolean
});
// Method
console.log ($ ( '# box' ) layout ( 'panel', 'north'));. // returns the specified panel
. $ ( '# Box') layout ( 'collapse ',' north '); // Sets the specified panel is folded, the parameter values are available:' north ',' south ' ,' east ',' west '.
. $ ( '# box') layout ( 'expand', 'north'); // Sets the specified panel expanded, the parameter values are available: 'north', 'south' , 'east', 'west'.
$ (document) .click (function ( ) {.. $ ( '# box') layout () css ( 'display', 'block'); $ ( '# box') layout ( 'resize');.} ); //// re-adjust the layout and size of
$ ( '# box') layout ( 'add', {title: 'center title', region: 'center',}.);