Monthly Archives: August 2012

EasyUI Portal Extension

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 3: Add panel widgets to this 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
width number The width of portal. auto
height number The height of portal. auto
border boolean Defines if to show portal border. false
fit boolean When true to set the portal size fit it’s parent container. false

Events

Name Parameters Description
onStateChange none Fires when users drag and drop a panel.
onResize width,height Fires when the portal size is changed.

Methods

Name Parameter Description
options none Return the options object.
resize param Set the portal size, the ‘param’ parameter contains following properties:
width: the new width of portal.
height: the new height of portal.
getPanels columnIndex Get the specified column panels, when columnIndex parameter is not assigned, return all panels.
add param Add a new panel, the ‘param’ parameter contains following properties:
panel: the panel object to be added.
columnIndex: the column index to be inserted.
remove panel Remove and destroy the specified panel.
disableDragging panel Disable the dragging feature for a panel.
enableDragging panel Enable the dragging feature for a panel.

Download the EasyUI Extension: