easyUI layout
layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的,
周边区域panel是可选项,所有周边区域的panel可以改变大小通过拖动边框,他们也可以折叠(collapse)通过点击触发折叠事件,布局可以嵌套,因此用户
可以创建你想要的复杂布局;
使用示例
创建 Layout
- <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
- <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加载内容.
- <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'. |
easyUI layout的更多相关文章
- easyui layout 收缩的bug
easyui layout提供collapse方法折叠指定的 panel,'region' 参数可能的值是:'north'.'south'.'east'.'west',但是在 IE6的环境下,调用这个 ...
- Easyui layout设置满屏效果
html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- EasyUI Layout 添加、删除、折叠、展开布局
<!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel=&qu ...
- EasyUI Layout 布局
1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...
- easyui layout 折叠之后显示标题
方法一:重载扩展panel收缩事件 (function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; ...
- 前端框架easyui layout, Tabs,tree
一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...
- easyui layout 折叠后显示标题
(function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; $.extend($.fn.layo ...
- Easyui Layout Center 全屏方法扩展
$.extend($.fn.layout.methods, { full : function (jq) { return jq.each(function () { var layout = $(t ...
随机推荐
- 一些简单的Js代码的封装
1 function getById(id) { 2 3 } 4 5 function getAttr(el, k) { 6 7 } 8 9 function setAttr(el, k, v) { ...
- 7、SpringBoot+Mybatis整合------PageHelper简单分页
开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis/tree/1d30d2a573ce6784149a28af9b ...
- React Native ref高级用法&&setNativeProps使用
ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...
- Element表单验证(1)
Element表单验证(1) 首先要掌握Element官方那几个表单验证的例子,然后才看下面的教程. Element主要使用了async-validator这个库作为表单验证 async-valida ...
- python核心编程2 第五章 练习
5-2 运算符(a) 写一个函数,计算并返回两个数的乘积(b) 写一段代码调用这个函数,并显示它的结果 def product(x, y): return x * y if __name__ == ' ...
- 使用Docker 一键部署 LNMP+Redis 环境
使用Docker 部署 LNMP+Redis 环境 Docker 简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linu ...
- JAVA实现RSA加密,非对称加密算法
RSA.java package org.icesnow.jeasywx.util.security; import java.security.Key; import java.security.K ...
- PHP continue和break的用法(深入理解)
对于刚入门的PHP童鞋们来说,在循环体中的continue和break的作用总是分不清到底是什么意思, 怎么用, 两者到底有什么区别? 接下来说几个例子,其实它们是很好区分的. <?php $t ...
- 关于PHPExcel 基础使用方法
$dir=dirname(__FILE__);//找到当前脚本所在路径require_once $dir.'/PHPExcel/PHPExcel.php';$objPHPExcel=new PHPEx ...
- anaconda+jupyter notebook 安装配置
安装Anaconda 从清华大学开源软件镜像站选择合适自己的版本 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda ...