JQueryEasyUI 組件 佈局 Layout組件

 1，介紹

layout佈局組件是一個基本的容器組件，通常使用該組件來實現網站後臺的總體佈局設計。在該組件內部可以放置其它的easyui組件。

該組件將內容分爲5個區域，分別是東西南北中，中間區域面板是必須存在的 邊緣面板是可選的 也可以點擊摺疊按鈕將面板摺疊起來，佈局可以嵌套

繼承關係   panel  和 resizable

2,屬性

屬性	屬性值類型	描述
title	string	佈局面板標題文本
region	string	定義佈局面板位置，可用的值有：north  south  east  west  center
border	boolean	爲true時   顯示佈局面板邊框
split	boolean	爲true時   用戶可以通過分割欄改變面板大小
iconCls	string	一個包含圖標的CSS類ID  該圖標將會顯示到面板標題上
href	string	用於讀取遠程站點數據的URL鏈接
collapsible	boolean	定義是否顯示摺疊按鈕
fit	boolean	當設置爲true 時  面板大小將自適應父容器

3，方法

方法名	參數類型	描述
add	options	添加指定面板   屬性參數是一個匹配對象
remove	region	移除指定面板  'region'參數可用值 nortj  south   east  west

語法

$（"#標籤ID"）.layout("add",{
                itemText:itemValue
        });

$（"#標籤ID"）.layout("remove",region});

4，實例

<div id="cc" class="easyui-layout" data-options="fit:true">
        <%--//基於父容器最大化--%>
        <div data-options="region:'north',title:'北部'" style="height: 100px"></div>

        <div data-options="region:'south',title:'南部'" style="height: 100px"></div>

        <div data-options="region:'east',title:'東部'" style="width: 100px;"></div>

        <div data-options="region:'west',title:'西部'" style="width: 100px;"></div>


        <div data-options="region:'center',title:'中部'" style="padding: 5px; background-color: #eee">
            選擇區域：<input id="area" /><br />
            <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
            <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">刪除</a>
        </div>
    </div>

 $(function () {
           
            addcomArea();

            addbtn();
        });

        function addcomArea() {
            $("#area").combobox({
                width: 150,
                valueField: 'id',
                textField: 'text',
                data: [
                    { "id": "north", "text": "北部", "selected": true },
                    { "id": "south", "text": "南部" },
                    { "id": "west", "text": "北部" },
                    { "id": "east", "text": "北部" }
                ]
            });
        }

        function addbtn() {
            $("#btn").linkbutton({
                onClick: function () {
                    var strLay = $("#area").combobox("getValue");
                    var strLayT = $("#area").combobox("getText");
                    addArea(strLay, strLayT);
                }
            });
            $("#btn2").linkbutton({
                onClick: function () {
                    var strLay = $("#area").combobox("getValue");
                    $("#cc").layout("remove", strLay);
                }
            });
        }

        function addArea(strA, strB) {
            if (strA=="north"||strA=="south") {
                $("#cc").layout("add", {
                    region: strA,
                    height: 100,
                    title: strB,
                    split:true,
                });
            }

            if (strA == "west" || strA == "east") {
                $("#cc").layout("add", {
                    region: strA,
                    width: 100,
                    title: strB,
                    split: true,
                });
            }
        }