">
" />
Easy Tutorial
❮ Ext Themes Home ❯

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


❮ Ext Themes Home ❯