Easy Tutorial
❮ Jeasyui Tree Treegrid3 Jeasyui Layout Accordion ❯

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

  1. Creating a Panel from Markup

Creating a panel from markup is easier. Add the 'easyui-panel' class to the <div> tag.

&lt;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>
  1. 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.
❮ Jeasyui Tree Treegrid3 Jeasyui Layout Accordion ❯