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