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

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

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

使用示例

创建 Layout
1.通过标记创建layout.
 记得添加"easyui-layout"样式给div标记.
  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
  2. <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  3. <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  4. <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
  5. <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  6. <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  7. </div>

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

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

3.创建嵌套layout

注意那个west panel的内部的布局是折叠的.
  1. <body class="easyui-layout">
  2. <div data-options="region:'north'" style="height:100px"></div>
  3. <div data-options="region:'center'">
  4. <div class="easyui-layout" data-options="fit:true">
  5. <div data-options="region:'west',collapsed:true" style="width:180px"></div>
  6. <div data-options="region:'center'"></div>
  7. </div>
  8. </div>
  9. </body>

4.通过ajax加载内容.

这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.
  1. <body class="easyui-layout">
  2. <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
  3. <div data-options="region:'center',href:'center_content.php'" ></div>
  4. </body>
折叠 Layout Panel
  1. $('#cc').layout();
  2. // 折叠west panel
  3. $('#cc').layout('collapse','west');
添加west 区域panel 工具按钮
  1. $('#cc').layout('add',{
  2. region: 'west',
  3. width: 180,
  4. title: 'West Title',
  5. split: true,
  6. tools: [{
  7. iconCls:'icon-add',
  8. handler:function(){alert('add')}
  9. },{
  10. iconCls:'icon-remove',
  11. handler:function(){alert('remove')}
  12. }]
  13. });

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'.

easyUI layout的更多相关文章

  1. easyui layout 收缩的bug

    easyui layout提供collapse方法折叠指定的 panel,'region' 参数可能的值是:'north'.'south'.'east'.'west',但是在 IE6的环境下,调用这个 ...

  2. Easyui layout设置满屏效果

    html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  4. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  5. EasyUI Layout 添加、删除、折叠、展开布局

    <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel=&qu ...

  6. EasyUI Layout 布局

    1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...

  7. easyui layout 折叠之后显示标题

    方法一:重载扩展panel收缩事件 (function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; ...

  8. 前端框架easyui layout， Tabs，tree

    一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...

  9. easyui layout 折叠后显示标题

    (function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; $.extend($.fn.layo ...

  10. Easyui Layout Center 全屏方法扩展

    $.extend($.fn.layout.methods, { full : function (jq) { return jq.each(function () { var layout = $(t ...

随机推荐

  1. cnn中的fp和bp推导

    昨天下午在单位从新推导了一遍fp和bp. 在整个网络的训练中,最关键的就是计算残差. 最后一层残差很容易,那么前面每一层的残差怎么计算呢? 总体来说,有多少权重就需要多少残差项来进行权重更新.每个权重 ...

  2. 绕不开的this

    犹豫两秒要不要整理this,从红皮书上看了半天,没搞懂哎(弱爆了) 什么是this?this是在执行上下文创建时期创建的一个执行过程中不可改变的变量.执行上下文是指js引擎会将代码执行前需要的变量th ...

  3. PEP8 常用规范

    PEP8 常用规范 完整的规范移步这里两个传送门 pep8规范 官方文档:https://www.python.org/dev/peps/pep-0008/ PEP8中文翻译:http://www.c ...

  4. ios统计流量代码

    #include <ifaddrs.h> #include <sys/socket.h> #include <net/if.h> 1.3G/GPRS流量统计 int ...

  5. MySql客户端远程连接MySql服务器

    设置MySql服务器以接听端口及以绑定IP地址 MySql服务器默认监听3306端口,确定防火墙以开放此端口. 编辑/etc/my.cnf 添加绑定IP地址.bind-address=192.168. ...

  6. Java之 jstl 自定义标签的方法

    1.写一个Java类 我的路径是写再tag包中的一个 HelloTag类 package tag; import java.io.IOException; import javax.servlet.j ...

  7. Xtrabackup实现MySQL备份

    一.xtrabackup介绍 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写)它由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上 ...

  8. openldap完整版本搭建记录

    文档信息 目        的:搭建一套完整的OpenLDAP系统,实现账号的统一管理.                     1:OpenLDAP服务端的搭建                   ...

  9. 【Hadoop/Hive/mapreduce】系列之如何删除HIVE 表格的分区

    今天的一个业务场景就是要把三年的数据从第一天不停的融合起来,每一天作为表格一个新的分区.由于空间有限,数据量很大,可能每天数据都是几十个G的大小.所以我需要做的一点就是在融合这一天之后,删除一天的分区 ...

  10. 可以字符串string转化成list,tuple,dict的eval()方法

    功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source[, globals[, locals]]) -> value 参数: source:一个Python表 ...