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