现在的位置: 首页 > API > easyuiAPI > 正文
jQuery easyui layout API
2012年01月28日 easyuiAPI, Layout ⁄ 共 2479字 暂无评论 ⁄ 被围观 12,505 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版本扩展而来.

使用技巧:

  • 布局的fit属性可以保证整个layout不管是在人为调整浏览器大小,还是脚本调整浏览器大小时,均能自适应父容器大小。
  • 使用在html标记样式的方式来布局可以尽量分开表现和业务层的代码,所以不提倡使用javascript来生成布局,easyui的设计理念就是尽量脱离脚本和css就能够方便布局。

插件扩展:

1.2.5版本bug:

  • 使用脚本收缩东西南北四个区域后,即便是在fit="true"的情况下,south区域空出来的空白不能被自动填充,解决方案见这里
  • 对于display为none的region,layout自适应重新布局总是无效,即不能占据隐藏region的空间,解决方案见这里

给我留言

留言无头像?


×