jQuery EasyUI Extension - Portal (Create Charts, Lists, Sphere Charts, etc.)
Usage
Step 1: Create an HTML Page
<div id="pp" style="width:800px;height:500px;">
<div style="width:33%"></div>
<div style="width:33%"></div>
<div style="width:33%"></div>
</div>
Step 2: Create a Portal
$('#pp').portal(options);
Step 3: Add Panel Widgets to the Portal
// create the panel
var p = $('<div></div>').appendTo('body');
p.panel({
title: 'My Title',
height: 150,
closable: true,
collapsible: true
});
// add the panel to the portal
$('#pp').portal('add', {
panel: p,
columnIndex: 0
});
Properties
| Name |
Type |
Description |
Default Value |
| width |
number |
The width of the portal. |
auto |
| height |
number |
The height of the portal. |
auto |
| border |
boolean |
Defines whether to show the portal border. |
false |
| fit |
boolean |
When set to true, the portal size is set to fit its parent container. |
false |
Events
| Name |
Parameters |
Description |
| onStateChange |
none |
Triggered when the user drags and drops a panel. |
| onResize |
width, height |
Triggered when the portal size changes. |
Methods
| Name |
Parameters |
Description |
| options |
none |
Returns the options object. |
| resize |
param |
Sets the portal size, 'param' includes the following properties: <br>width: new width of the portal. <br>height: new height of the portal. |
| getPanels |
columnIndex |
Gets the specified column panels, returns all panels if columnIndex is not assigned. |
| add |
param |
Adds a new panel, 'param' includes the following properties: <br>panel: the panel object to add. <br>columnIndex: the column index to insert into. |
| remove |
panel |
Removes and destroys the specified panel. |
| disableDragging |
panel |
Disables dragging functionality for the panel. |
| enableDragging |
panel |
Enables dragging functionality for the panel. |
Download jQuery EasyUI Example
jquery-easyui-portal.zip