YouTip` tag.
2. Creating a Panel programmatically
Let's create a Panel with a toolbar in the top-right corner.
$('#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 a panel to a new position.
$('#p').panel('move',{ left:100, top:100});
#### Loading Content
Let's load panel content via ajax and show some information when loading is successful.
$('#p').panel({ href:'content_url.php', onLoad:function(){alert('loaded successfully'); }});
## Properties
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| id | string | The id attribute of the panel. | null |
| title | string | The title text to display in the panel header. | null |
| iconCls | string | A CSS class to display a 16x16 icon in the panel. | null |
| width | number | Set the panel width. | auto |
| height | number | Set the panel height. | auto |
| left | number | Set the panel left position. | null |
| top | number | Set the panel top position. | null |
| cls | string | Add a CSS class to the panel. | null |
| headerCls | string | Add a CSS class to the panel header. | null |
| bodyCls | string | Add a CSS class to the panel body. | null |
| style | object | Add a custom style to the panel. Example code to change the panel border width: | {} |
| fit | boolean | When set to true, the panel size will fit its parent container. The following example demonstrates a panel that automatically adjusts its size to the maximum inner size of its parent container. | false |
| border | boolean | Defines whether to show the panel border. | true |
| doSize | boolean | If set to true, the panel is resized and laid out when created. | true |
| noheader | boolean | If set to true, the panel header will not be created. | false |
| content | string | The main content of the panel. | 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 tools, possible values: 1. An array, each element contains 'iconCls' and 'handler' properties. 2. A selector, indicating the tools group. The panel tools group can be declared via an existing `
panel content.
panel content.
panel content.
panel content.
Embedded Panel
` tag: The panel tools group can be defined via an array: | [] |
| collapsed | boolean | Defines whether the panel is collapsed at initialization. | false |
| minimized | boolean | Defines whether the panel is minimized at initialization. | false |
| maximized | boolean | Defines whether the panel is maximized at initialization. | false |
| closed | boolean | Defines whether the panel is closed at initialization. | false |
| href | string | A URL to load remote data and display it in the panel. Note that the content will not be loaded unless the panel is opened. This is useful for creating a lazy-loading panel: Open | null |
| cache | boolean | If set to true, the panel content loaded from href will be cached. | true |
| loadingMessage | string | A message to display in the panel when loading remote data. | Loading… |
| extractor | function | Defines how to extract content from the ajax response, returns the extracted data. extractor: function(data){var pattern = /]*>((.|)*)/im;var matches = pattern.exec(data);if (matches){return matches;// only extract body content} else {return data;}} | |
## Events
| Name | Parameters | Description |
| --- | --- | --- |
| onLoad | none | Fires when remote data is loaded. |
| onBeforeOpen | none | Fires before the panel is opened, return false to stop the opening. |
| onOpen | none | Fires after the panel is opened. |
| onBeforeClose | none | Fires before the panel is closed, return false to cancel the closing. The following panel will not close.
The panel cannot be closed.
|
| onClose | none | Fires after the panel is closed. |
| onBeforeDestroy | none | Fires before the panel is destroyed, return false to cancel the destroying. |
| onDestroy | none | Fires after the panel is destroyed. |
| onBeforeCollapse | none | Fires before the panel is collapsed, return false to stop the collapsing. |
| onCollapse | none | Fires after the panel is collapsed. |
| onBeforeExpand | none | Fires before the panel is expanded, return false to stop the expanding. |
| onExpand | none | Fires after the panel is expanded. |
| onResize | width, height | Fires after the panel is resized. width: the new external width height: the new external height |
| onMove | left,top | Fires after the panel is moved. left: the new left position top: the new top position |
| onMaximize | none | Fires after the window is maximized. |
| onRestore | none | Fires after the window is restored to its original size. |
| onMinimize | none | Fires 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 in the header. |
| open | forceOpen | Opens the panel. When the forceOpen parameter is set to true, it bypasses the onBeforeOpen callback. |
| close | forceClose | Closes the panel. When the forceClose parameter is set to true, it bypasses the onBeforeClose callback. |
| destroy | forceDestroy | Destroys the panel. When the forceDestroy parameter is set to true, it bypasses the onBeforeDestroy callback. |
| refresh | href | Refreshes the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property. Example code: // open a panel and then refresh its contents. $('#pp').panel('open').panel('refresh');// refresh contents with a new URL. $('#pp').panel('open').panel('refresh','new_content.php'); |
| resize | options | Sets the panel size and performs layout. The Options object contains the following properties: width: the new panel width height: the new panel height left: the new panel left position top: the new panel top position Example code: $('#pp').panel('resize',{width: 600,height: 400}); |
| move | options | Moves the panel to a new position. The Options object contains the following properties: left: the new panel left position top: the new panel top position |
| maximize | none | Maximizes the panel to fit its container. |
| 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. |
* * jQuery EasyUI Plugin](#)