EasyUI:Layout 布局
当构造布局的时候,可以通过 $.fn.layout.defaults 重写默认的 defaults。
布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。布局(layout)可以嵌套,因此用户可建立复杂的布局。
依赖
- panel
- resizable
布局选项
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
fit | boolean | 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器。当在 ‘body’ 标签上创建布局(layout)时,它将自动最大化到整个页面的全部尺寸。 | false |
区域面板选项(Region Panel Options)
区域面板选项(Region Panel Options)是定义在面板(panel)组件中,下面是一些共同的和新增的属性:
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 布局面板(layout panel)的标题文本。 | null |
region | string | 定义布局面板(layout panel)的位置,其值是下列之一:north、south、east、west、center。 | |
border | boolean | 当设置为 true 时,就显示布局面板(layout panel)的边框。 | true |
split | boolean | 当设置为 true 时,就显示拆分栏,用户可以用它改变面板(panel)的尺寸。 | false |
iconCls | string | 在面板(panel)头部显示一个图标的 CSS class。 | null |
href | string | 从远程站点加载数据的 URL 。 | null |
collapsible | boolean | 定义是否显示可折叠按钮。 true | |
minWidth | numbe | 面板(panel) | 最小宽度。 |
minHeight | number | 面板(panel) | 最小高度。 |
maxWidth | number | 面板(panel) | 最大宽度。 |
maxHeight | number | 面板(panel) | 最大高度。 |
方法
名称 | 参数 | 描述 |
---|---|---|
resize | none | 设置布局(layout)的尺寸。 |
panel | region | 返回指定的面板(panel),‘region’ 参数可能的值 |
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’。 |
用法(Layout Options)
创建布局(Layout)
- 通过标记创建布局(Layout)
添加 ‘easyui-layout’ class 到 <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',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>
- 在整个页面上创建布局(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',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>
- 创建嵌套布局。内部布局的西区面板是折叠的。
<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>
- 通过 ajax 加载内容。
布局(layout)是基于面板(panel)创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术,用户可以让他们的布局页面更快地显示。
<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>
折叠布局面板(Collpase Layout Panel)
$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');
通过工具按钮添加西区面板
$('#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')}}]
});
EasyUI:Layout 布局相关推荐
- EasyUI中layout布局的简单使用
场景 效果 布局选项(Layout Options) 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
- EasyUI -- Layout(布局)
第一章 介绍 EasyUI – Layout(布局)将布局容器分成了5个区域,分别是:east(东).west(西).south(南).north(北)和center(中).center(中)区域是必 ...
- php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
- JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
- EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
- Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例,编写layout代码: <body class="easyui-layout ...
- Springboot 使用thymeleaf模板layout布局
使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties><project.build.sourceEncoding> ...
- Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局...
2019独角兽企业重金招聘Python工程师标准>>> 一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学 ...
- 一天搞定CSS:支持IE的Layout布局--16
1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://b ...
- 【-】WebKit Layout (布局)
WebKit 在渲染页面之前,需要确定各个元素的位置.大小,而这个过程就是layout(布局).下面,我们对layout的主要过程进行一番说明. 一.FrameView::layout方法 Frame ...
最新文章
- oracle中的sql%rowcount,sql%found、sql%notfound、sql%rowcount和sql%isopen
- android固定位置滚动文本,android – 滚动文本上方的按钮,按钮固定在底部
- JavaScript事件监听
- tree的使用,显示行号,find命令应用
- mysql 远程攻击_gopher 协议攻击内网 mysql
- js数组中的引用类型
- 腾讯AI Lab:深度解读AI辅助翻译的研究及应用
- 第十一节,利用yolov3训练自己的数据集
- python处理时间和日期_python时间和日期的处理
- UNICODE与ANSI的区别
- Django实现简单的用户添加、删除、修改等功能
- crc循环冗余校验码c语言,crc循环冗余校验码算法
- DS18B20 数字温度传感器实验
- 饿了么推荐系统的从0到1
- 测试代理ip是否有效
- 如何在WinXP下查看软硬件端口的占用情况
- pig和piglet有什么区别?
- 【原理/Java并发】从volatile到MESI协议
- Android判断是否安装某个应用
- 江西地区媒体邀约资源现场官方直播推荐
热门文章
- 5. 在Windows上安装Git
- SlidingMenu第三篇 --- SlidingMenu使用介绍
- OutofMemory异常
- ClamAV学习【6】—— cli_load函数浏览
- 使用MonkeyTest对Android客户端进展压力测试
- markDown零碎整理
- poj 2828 线段树
- WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片
- POJ1546(进制转换)
- VS 2010 安装 .net framework2.0/3.0/3.5