YouTip

# jQuery EasyUI Extension - Portal (Create Charts, Lists, Sphere Diagrams, etc.) * * jQuery EasyUI Extension](#) * * * !(#) ## Usage #### Step 1: Create an HTML page #### Step 2: Create Portal $('#pp').portal(options); #### Step 3: Add panel widgets to the Portal // create the panelvar p = $('').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** | | --- | --- | --- | --- | | width | number | The width of the portal. | auto | | height | number | The height of the portal. | auto | | border | boolean | Defines whether to show the portal's border. | false | | fit | boolean | When set to true, the portal's size will fit its parent container. | false | ## Events | **Name** | **Parameters** | **Description** | | --- | --- | --- | | onStateChange | none | Fires when the user drags and drops a panel. | | onResize | width,height | Fires when the portal's size changes. | ## Methods | **Name** | **Parameters** | **Description** | | --- | --- | --- | | options | none | Returns the options object. | | resize | param | Sets the portal's size. The 'param' parameter includes the following attributes: width: The new width of the portal. height: The new height of the portal. | | getPanels | columnIndex | Gets the panels of the specified column. If the columnIndex parameter is not assigned, all panels are returned. | | add | param | Adds a new panel. The 'param' parameter includes the following attributes: panel: The panel object to add. columnIndex: The column index to insert into. | | remove | panel | Removes and destroys the specified panel. | | disableDragging | panel | Disables the dragging functionality of the panel. | | enableDragging | panel | Enables the dragging functionality of the panel. | ## Download jQuery EasyUI Example [jquery-easyui-portal.zip](#) * * * [![Image 6: jQuery EasyUI Extension](