jQuery EasyUI Extensions -Portal (making charts, lists, sphere graphs, etc.)
jQuery EasyUI Extensions
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 Portal
$('#pp').portal(options);
Step 3: Add panel widgets to 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 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 border of the portal. | false |
| fit | boolean | When set to true, sets the size of the portal 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 size of the portal changes. |
Methods
| Name | Parameters | Description |
|---|---|---|
| options | none | Returns the options object. |
| resize | param | Sets the size of the portal. The 'param' parameter includes the following properties: width: the new width of the portal. height: the new height of the portal. |
| getPanels | columnIndex | Gets the specified column panel. When the columnIndex parameter is not assigned, returns all panels. |
| add | param | Adds a new panel. The 'param' parameter includes the following properties: panel: the panel object to be added. columnIndex: the column index to insert. |
| remove | panel | Removes and destroys the specified panel. |
| disableDragging | panel | Disables the drag-and-drop functionality of the panel. |
| enableDragging | panel | Enables the drag-and-drop functionality of the panel. |
Download jQuery EasyUI Examples
jquery-easyui-portal.zip
jQuery EasyUI Extensions Other Extensions