❮ Jeasyui Layout Tabs2 Jeasyui App Crud3 ❯

jQuery EasyUI Layout Plugin - `Layout`

The default defaults can be rewritten through $.fn.layout.defaults.

A layout is a container with five regions: north, south, east, west, and center. The center region panel is required, while the edge region panels are optional. Each edge region panel can be resized by dragging its borders, or collapsed by clicking the collapse trigger. Layouts can be nested, allowing users to create complex layouts.

Dependencies

panel
resizable

Usage

Creating a Layout

Create a layout via markup.

Add the 'easyui-layout' class to the <div> tag.

<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>

Create a layout on the entire 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>

Create a nested layout.

Note that the west panel of the 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>

Load content via AJAX.

A layout is created based on panels. Each region panel provides built-in support for loading content from a URL dynamically. Using dynamic loading, users can make their layout pages display 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>

Collapse Layout Panel

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

Add West Panel with Tool Buttons

$('#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

Name	Type	Description	Default
fit	boolean	When set to true, the layout size is set to fit its parent container. When creating a layout on the 'body' tag, it will automatically maximize to the full size of the entire page.	false

Region Panel Options

Region Panel Options are defined within the panel component. Below are some common and additional properties:

Name	Type	Description	Default
title	string	The title text of the layout panel.	null
region	string	Defines the position of the layout panel, which can be one of: north, south, east, west, center.
border	boolean	When set to true, the layout panel's border is displayed.	true
split	boolean	When set to true, a split bar is displayed, allowing the user to resize the panel.	false
iconCls	string	A CSS class that displays an icon in the panel header.	null
href	string	A URL to load data from a remote site.	null
collapsible	boolean	Defines whether to show the collapse button.	true
minWidth	number	The minimum width of the panel.	10
minHeight	number	The minimum height of the panel.	10
maxWidth	number	The maximum width of the panel.	10000
maxHeight	number	The maximum height of the panel.	10000

Methods

Name	Parameters	Description
resize	none	Sets the size of the layout.
panel	region	Returns the specified panel, where 'region' can be: 'north', 'south', 'east', 'west', 'center'.
collapse	region	Collapses the specified panel, where 'region' can be: 'north', 'south', 'east', 'west'.
expand	region	Expands the specified panel, where 'region' can be: 'north', 'south', 'east', 'west'.
add	options	Adds a specified panel, where options is a configuration object. See tab panel properties for more details.
remove	region	Removes the specified panel, where 'region' can be: 'north', 'south', 'east', 'west'.