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