JQueryEasyUI 組件 佈局 portal組件

1，介紹

以用戶爲中心 實現信息的集中訪問
        利用portal 可以方便地將登錄用戶所需要的，來源各種渠道的信息集成在一個統一的頁面模塊之內

2，屬性

屬性名	屬性值類型	描述
width	number	門戶寬度
height	number	門戶高度
border	boolean	定義是否顯示門戶邊框
fit	boolean	當屬性爲true時   則設置門戶大小自適應父容器

3，方法

方法名	參數類型	描述
add	param	加一個新面板 'param' 參數包含一下屬性： panel ：添加的面板對象   columnIndex:  插入的列索引
remove	panel	移除和銷燬指定面板

4，實例

<div id="portal-new">
        <div style="width: 33%">第一塊</div>
        <div style="width: 33%">第二塊</div>
        <div style="width: 33%">
            <div id="frm1" title="31" style="height:500px">
                31
                <a id="btn"  href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第一塊add</a>
                <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第二塊add</a>
                <a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第三塊add</a>
            </div>
            <div id="frm2" title="32" style="height:500px">32</div>
        </div>
    </div>

  $(function () {
            $("#portal-new").portal({
                border: true,
                fit: true
            });

            $("#btn").linkbutton({
                onClick: function () {
                    add("第一塊", 0);//添加函數
                }
            });

            $("#btn2").linkbutton({
                onClick: function () {
                    add("第二塊", 1);//添加函數
                }
            });

            $("#btn3").linkbutton({
                onClick: function () {
                    //刪除代碼
                    $("#portal-new").portal("remove", "#frm2");
                }
            });
        });

        function add(strTitle, i) {
            var p = $("<div><div/>").appendTo("body");//在body 標籤元素創建一個div
            p.panel({
                //將div實例化並渲染一個panel組件
                title: strTitle,
                content: strTitle,
                height: 150,
                closable: true,
                collapsible:true
            });
            $("#portal-new").portal('add', {
                panel: p,
                columnIndex:i,
            });

            $("#portal-new").portal("resize");
        }