easyUI Layout

@author YHC

覆盖默认属性$.fn.layout.defaults

layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的,

周边区域panel是可选项,所有周边区域的panel可以改变大小通过拖动边框,他们也可以折叠(collapse)通过点击触发折叠事件,布局可以嵌套,因此用户

可以创建你想要的复杂布局;

使用示例

创建 Layout

1.通过标记创建layout.

记得添加" easyui-layout"样式给div标记.

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">  <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2.创建一个layout在整个页面.

<body class="easyui-layout">  <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3.创建嵌套layout

注意那个west panel的内部的布局是折叠的.

<body class="easyui-layout">  <div data-options="region:'north'" style="height:100px"></div>  <div data-options="region:'center'">  <div class="easyui-layout" data-options="fit:true">  <div data-options="region:'west',collapsed:true" style="width:180px"></div>  <div data-options="region:'center'"></div>  </div>  </div>
</body>

4.通过ajax加载内容.

这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.

<body class="easyui-layout">  <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>  <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

折叠 Layout Panel

$('#cc').layout();
// 折叠west panel
$('#cc').layout('collapse','west');

添加west 区域panel 工具按钮

$('#cc').layout('add',{  region: 'west',  width: 180,  title: 'West Title',  split: true,  tools: [{  iconCls:'icon-add',  handler:function(){alert('add')}  },{  iconCls:'icon-remove',  handler:function(){alert('remove')}  }]
});

Layout 选项

Name	Type	Description	Default
fit	boolean	设置为true设置layout的大小适应父容器大小.当创建layout 在body标签上的时候,它将自动调整大小为最大填满整个页面.	false

Region Panel 选项

region panel 选项是定义在panel组件, 下面是一些常用和新增的属性:

Name	Type	Description	Default
title	string	layout panel标题文本.	null
region	string	定义 layout panel 位置, 这个值是下面其中的一个: north, south, east, west, center.
border	boolean	True 显示 layout panel 的边框(border).	true
split	boolean	True 显示分割条,通过此属性用户可以改变panel的大小.	false
iconCls	string	一个 icon CSS 样式,用来展示一个icon在panel的头部.	null
href	string	一个URL从一个远程的站点加载数据.	null

方法

Name	Parameter	Description
resize	none	设置 layout 大小.
panel	region	返回特性的 panel, 这个 'region'参数的可用值有:'north','south','east','west','center'.
collapse	region	折叠特定的panel,这个 'region'参数的可用值有:'north','south','east','west'.
expand	region	展开一个特定的 panel, 这个 'region' 参数的可用值有:'north','south','east','west'.
add	options	添加一个定义panel, 这个options参数是一个配置对象, 请见tab panel 属性得到更多详细信息.
remove	region	移除一个特定的 panel, 这个'region' 参数的可用值有:'north','south','east','west'.

以上如有错误信息,请指出thanks!

easyUI Layout相关推荐

Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例,编写layout代码: <body class="easyui-layout ...
easyui layout 收缩的bug
easyui layout提供collapse方法折叠指定的 panel,'region' 参数可能的值是:'north'.'south'.'east'.'west',但是在 IE6的环境下,调用这个 ...
EasyUI -- Layout（布局）
第一章介绍 EasyUI – Layout(布局)将布局容器分成了5个区域,分别是:east(东).west(西).south(南).north(北)和center(中).center(中)区域是必 ...
网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?
1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height ...
EasyUI Layout实现tabs标签
一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncod ...
JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
easyUI layout 中使用tabs+iframe解决请求两次方法
demo中的事例在加载tab页面时是 1 functioncreateFrame(url) {2 var s = '<iframe name="iframepanel" sc ...
easyui布局:表格底部页码被遮挡
问题图片: 由于在布局中,表格上面有操作按钮,导致表格底部的页码无法固定在底部. 解决方式: 正确使用easyui layout 问题代码: <div data-options="co ...
html隐藏最大化按钮,easyui div 上下布局最大化按钮隐藏标题
背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div ...