Override defaults with $.fn.layout.defaults.
The layout is the container that has up to five regions: north, south, east, west and center. The center region panel is required but edge region panel is optional. Every edge region panel can be resized by dragging its border, they also can be collapsed by clicking on its collapsing trigger. The layout can be nested, thus users can build what complex layout he wants.
1. Create Layout via markup.
Add 'easyui-layout' class to <div/> markup.
- <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. Create layout on whole page.
- <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. Create nested layout.
Notice that the west panel of inner layout is collapsed.
- <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. Loading content with ajax
The layout is created based on panel. Each region panel provides built-in support for asynchronously loading content from URLs. Using the async loading technology, users can make their layout page display more faster.
- <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>
- $('#cc').layout();
- // collapse the west panel
- $('#cc').layout('collapse','west');
- $('#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')}
- }]
- });
Name | Type | Description | Default |
---|---|---|---|
fit | boolean | Set to true to set the layout size fit its parent container. When creating layout on 'body' tag, it will be auto maximized to the full size of whole page. | false |
The region panel options is defined in panel component, below is some common and added properties:
Name | Type | Description | Default |
---|---|---|---|
title | string | The layout panel title text. | null |
region | string | Defines the layout panel position, the value is one of following: north, south, east, west, center. | |
border | boolean | True to show layout panel border. | true |
split | boolean | True to show a split bar which user can change the panel size. | false |
iconCls | string | An icon CSS class to show a icon on panel header. | null |
href | string | An URL to load data from remote site. | null |
collapsible | boolean | Defines if to show collapsible button. | true |
minWidth | number | The minimum panel width. | 10 |
minHeight | number | The minimum panel height. | 10 |
maxWidth | number | The maximum panel width. | 10000 |
maxHeight | number | The maximum panel height. | 10000 |
Name | Parameter | Description |
---|---|---|
resize | none | Set the layout size. |
panel | region | Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'. |
collapse | region | Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'. |
expand | region | Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'. |
add | options | Add a specified panel, the options parameter is a config object, see tab panel properties for more details. |
remove | region | Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'. |