jQuery EasyUI 擴展 - Portal（製作圖表、列表、球形圖等）

jQuery EasyUI 擴展 jQuery EasyUI 擴展

用法

步驟 1：創建一個 HTML 頁面

    <div id="pp" style="width:800px;height:500px;">
        <div style="width:33%"></div>
        <div style="width:33%"></div>
        <div style="width:33%"></div>
    </div>

步驟 2：創建 Portal

    $('#pp').portal(options);

步驟 3：向 Portal 添加面板（panel）部件

    // 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
    });

屬性

名稱 類型 描述 默認值
width number portal 的寬度。 auto
height number portal 的高度。 auto
border boolean 定義是否顯示 portal 的邊框。 false
fit boolean 當設置為 true 時，設置 portal 的尺寸以適應它的父容器。 false

事件

名稱 參數 描述
onStateChange none 當用戶拖放面板（panel）時觸發。
onResize width,height 當 portal 的尺寸改變時觸發。

方法

名稱 參數 描述
options none 返回選項（options）對象。
resize param 設置 portal 的尺寸，'param' 參數包括下列屬性：
width：portal 的新寬度。
height：portal 的新高度。
getPanels columnIndex 獲取指定的列面板（panel），當 columnIndex 參數為分配時，則返回所有的面板（panel）。
add param 添加一個新的面板（panel），'param' 參數包括下列屬性：
panel：要添加的面板（panel）對象。
columnIndex：要插入的列索引。
remove panel 移除並銷毀指定的面板（panel）。
disableDragging panel 禁用面板（panel）的拖拽功能。
enableDragging panel 啟用面板（panel）的拖拽功能。

下載 jQuery EasyUI 實例

jquery-easyui-portal.zip

jQuery EasyUI 擴展 jQuery EasyUI 擴展