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