jQuery easyui layout API | WebUI框架使用参考

现在的位置: 首页 > API > easyuiAPI > 正文

RSS

小中大

下篇

jQuery easyui layout API

2012年01月28日 ⁄ easyuiAPI, Layout ⁄ 共 2479字 ⁄ 暂无评论 ⁄ 被围观 14,585 views+

文章目录

[隐藏]

插件简介：

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版本扩展而来.