插件简介:
jQuery easyui layout 即easyui中的布局插件,该插件不同于dhtmlxlayout有很多种页面布局,easyui的layout只有一种布局,那就是“东西南北中”布局方式。
在“east”、“west”、“south”、“north”、“center”五个区域中,“center”区域是必须存在的,周边四个区域可以不存在,通过嵌套使用,可以达到任何复杂的页面布局。
依赖插件:
- panel
- resizable
使用例子:
创建布局:
通过给div标签添加 "easyui-layout" css类即可实现自动布局。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div region="north" title="North Title" split="true" style="height:100px;"></div> <div region="south" title="South Title" split="true" style="height:100px;"></div> <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div> <div region="west" split="true" title="West" style="width:100px;"></div> <div region="center" title="center title" style="padding:5px;background:#eee;"></div> </div>
也可以将整个页面作为布局
<body class="easyui-layout"> <div region="north" title="North Title" split="true" style="height:100px;"></div> <div region="south" title="South Title" split="true" style="height:100px;"></div> <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div> <div region="west" split="true" title="West" style="width:100px;"></div> <div region="center" title="center title" style="padding:5px;background:#eee;"></div> </body>
如果没有添加“easyui-layout”样式,也可以在javascript里触发布局:
$('#cc').layout();
收缩区域:
$('#cc').layout(); // collapse the west panel $('#cc').layout('collapse','west');
布局属性:
Name | Type | Description | Default |
---|---|---|---|
fit | boolean | 设置是否自动填充父容器,是layout自适应的关键所在. | false |
space | boolean | 当fit="true"的时候,设置留白的像素,即不完全填充父元素. | null |
区域属性:
Name | Type | Description | Default |
---|---|---|---|
title | string | 某个区域的标题. | null |
region | string | 定义布局的区域, 必须是以下几个值: north, south, east, west, center. | |
border | boolean | 某个区域的边框是否显示. | true |
split | boolean | 是否显示拖动条用于调整某个区域的大小. | false |
iconCls | string | 给区域标题添加图标,用css定义. | null |
href | string | 加载远程数据源时使用. | null |
splitImg | String | 是否显示split的背景图片 |
false |
布局方法:
Name | Parameter | Description |
---|---|---|
resize | none | 当layout某个region发生变动时,调用该方法重新布局. |
panel | region | 返回各个region的panel. |
collapse | region | 收起除center以外的任何其它region. |
expand | region | 展开除center以外的任何其它region. |
hidden | region | 隐藏除center以外的任何其它region,由1.2.5版本扩展而来. |
show | region | 显示除center以外的任何其它region,由1.2.5版本扩展而来. |
remove | region | 删除除center以外的任何其它region,由1.2.5版本扩展而来. |
add | region | 增加除center以外的任何其它region,由1.2.5版本扩展而来. |
使用技巧:
- 布局的fit属性可以保证整个layout不管是在人为调整浏览器大小,还是脚本调整浏览器大小时,均能自适应父容器大小。
- 使用在html标记样式的方式来布局可以尽量分开表现和业务层的代码,所以不提倡使用javascript来生成布局,easyui的设计理念就是尽量脱离脚本和css就能够方便布局。