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