jQuery EasyUI Layout Plugin - Panel
The defaults are overridden by $.fn.panel.defaults.
A panel serves as a container for other content. It is the foundational component for creating other components such as Layout, Tabs, Accordion, and more. It also provides built-in behaviors for collapsing, closing, maximizing, minimizing, and other custom actions. A panel can be easily embedded anywhere on a webpage.
Usage
Creating a Panel
- Creating a Panel from Markup
Creating a panel from markup is easier. Add the 'easyui-panel' class to the <div> tag.
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
- Programmatically Creating a Panel
Let's create a panel with a toolbar in the top right corner.
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title:'My Panel',
tools:[{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
Moving a Panel
Call the 'move' method to move the panel to a new position.
$('#p').panel('move',{
left:100,
top:100
});
Loading Content
Let's load content into the panel via ajax and display a message when loading is successful.
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
Properties
| Name | Type | Description | Default Value | |
|---|---|---|---|---|
| id | string | The id attribute of the panel. | null | |
| title | string | The title text displayed in the panel header. | null | |
| iconCls | string | A CSS class to display a 16x16 icon in the panel. | null | |
| width | number | Sets the width of the panel. | auto | |
| height | number | Sets the height of the panel. | auto | |
| left | number | Sets the left position of the panel. | null | |
| top | number | Sets the top position of the panel. | null | |
| cls | string | Adds a CSS class to the panel. | null | |
| headerCls | string | Adds a CSS class to the panel header. | null | |
| bodyCls | string | Adds a CSS class to the panel body. | null | |
| style | object | Adds custom style to the panel. <br>Example to change the panel border width: <div class="easyui-panel" style="width:200px;height:100px"<br> data-options="style:{borderWidth:2}"><br></div> | {} | |
| fit | boolean | When set to true, the panel size fits its parent container. Example of a panel that auto-adjusts to its parent container's inner size: <div style="width:200px;height:100px;padding:5px"><br> <div class="easyui-panel" style="width:200px;height:100px"<br> data-options="fit:true,border:false"><br> Embedded Panel<br> </div><br></div> | false | |
| border | boolean | Defines whether to show the panel border. | true | |
| doSize | boolean | If set to true, the panel resizes and lays out when created. | true | |
| noheader | boolean | If set to true, the panel header will not be created. | false | |
| content | string | The content of the panel body. | null | |
| collapsible | boolean | Defines whether to show the collapse button. | false | |
| minimizable | boolean | Defines whether to show the minimize button. | false | |
| maximizable | boolean | Defines whether to show the maximize button. | false | |
| closable | boolean | Defines whether to show the close button. | false | |
| tools | array,selector | Custom tool group, possible values: <br>1. Array, each element contains iconCls and handler properties. <br>2. Selector, indicating the tool group. <br> <br>Panel tool group can be declared by an existing <div> tag: <div class="easyui-panel" style="width:300px;height:200px"<br> title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"><br></div><br><div id="tt"><br> <a href="#" class="icon-add" onclick="javascript:alert('add')"></a><br> <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a><br></div>Panel tool group can be defined by an array: <div class="easyui-panel" style="width:300px;height:200px"<br> title="My Panel" data-options="iconCls:'icon-ok',tools:[<br> {<br> iconCls:'icon-add',<br> handler:function(){alert('add')}<br> },{<br> iconCls:'icon-edit',<br> handler:function(){alert('edit')}<br> }]"><br></div> | [] | |
| collapsed | boolean | Defines whether the panel is collapsed initially. | false | |
| minimized | boolean | Defines whether the panel is minimized initially. | false | |
| maximized | boolean | Defines whether the panel is maximized initially. | false | |
| closed | boolean | Defines whether the panel is closed initially. | false | |
| href | string | A URL to load remote data and display in the panel. Note that the content will not be loaded unless the panel is opened. Useful for creating a lazy-loading panel: <div id="pp" class="easyui-panel" style="width:300px;height:200px"<br> data-options="href:'get_content.php',closed:true"><br></div><br><a href="#" onclick="javascript:$('#pp').panel('open')">Open</a> | null | |
| cache | boolean | Set to true to cache the panel content loaded from href. | true | |
| loadingMessage | string | A message displayed in the panel when loading remote data. | Loading… | |
| extractor | function | Defines how to extract content from the ajax response, returning the extracted data. extractor: function(data){<br> var pattern = /<body[^>]*>((. | [\n\r])*)<\/body>/im;<br> var matches = pattern.exec(data);<br> if (matches){<br> return matches[1]; // only extract body content<br> } else {<br> return data;<br> }<br>} |
Events
| Name | Parameters | Description |
|---|---|---|
| onLoad | none | Triggered when remote data is loaded. |
| onBeforeOpen | none | Triggered before the panel opens, return false to stop opening. |
| onOpen | none | Triggered after the panel opens. |
| onBeforeClose | none | Triggered before the panel closes, return false to cancel closing. The following declared panel will not close. <div class="easyui-panel" style="width:300px;height:200px;"<br> title="My Panel" data-options="onBeforeClose:function(){return false}"><br> The panel cannot be closed.<br></div> |
| onClose | none | Triggered after the panel is closed. |
| onBeforeDestroy | none | Triggered before the panel is destroyed, returning false cancels the destruction. |
| onDestroy | none | Triggered after the panel is destroyed. |
| onBeforeCollapse | none | Triggered before the panel is collapsed, returning false stops the collapse. |
| onCollapse | none | Triggered after the panel is collapsed. |
| onBeforeExpand | none | Triggered before the panel is expanded, returning false stops the expansion. |
| onExpand | none | Triggered after the panel is expanded. |
| onResize | width, height | Triggered after the panel is resized. <br>width: new outer width <br>height: new outer height |
| onMove | left, top | Triggered after the panel is moved. <br>left: new left position <br>top: new top position |
| onMaximize | none | Triggered after the window is maximized. |
| onRestore | none | Triggered after the window is restored to its original size. |
| onMinimize | none | Triggered after the window is minimized. |
Methods
| Name | Parameters | Description |
|---|---|---|
| options | none | Returns the options property. |
| panel | none | Returns the outer panel object. |
| header | none | Returns the panel header object. |
| body | none | Returns the panel body object. |
| setTitle | title | Sets the title text of the header. |
| open | forceOpen | Opens the panel bypassing the onBeforeOpen callback if forceOpen is set to true. |
| close | forceClose | Closes the panel bypassing the onBeforeClose callback if forceClose is set to true. |
| destroy | forceDestroy | Destroys the panel bypassing the onBeforeDestroy callback if forceDestroy is set to true. |
| refresh | href | Refreshes the panel to load remote data. If the 'href' parameter is assigned, it will overwrite the old 'href' attribute. <br>Example: // open a panel and then refresh its contents.<br>$('#pp').panel('open').panel('refresh');<br>// refresh contents with a new URL.<br>$('#pp').panel('open').panel('refresh','new_content.php'); |
| resize | options | Sets the panel size and layout. The Options object includes the following properties: <br>width: new panel width <br>height: new panel height <br>left: new panel left position <br>top: new panel top position <br> <br>Example: $('#pp').panel('resize',{<br> width: 600,<br> height: 400<br>}); |
| move | options | Moves the panel to a new position. The Options object includes the following properties: <br>left: new panel left position <br>top: new panel top position |
| maximize | none | Adjusts the panel to fit its container size. |
| minimize | none | Minimizes the panel. |
| restore | none | Restores the maximized panel to its original size and position. |
| collapse | animate | Collapses the panel body. |
| expand | animate | Expands the panel body. |