第二百零二节,jQuery EasyUI,Layout(布局)组件
jQuery EasyUI,Layout(布局)组件
学习要点:
1.加载方式
2.布局属性
3.区域面板属性
4.方法列表
本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件。
一.加载方式
class 加载方式,这个属性一般使用class方法使用
<body id="box" class="easyui-layout">
<div data-options="region:'north',title:'头部标题',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'底部标题',split:true" style="height:100px;"></div>
<div data-options="region:'east',title:'右边标题',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'左边标题',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'中间标题'" style="padding:5px;background:#eee;"></div>
</body>
layout()将一个符合要求的元素执行布局方法
$(function () {
$('#box').layout({
//......
});
});
二.布局属性
fit boolean如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
$(function () {
$('#box').layout({
fit:true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
});
三.区域面板属性
一般写在html属性data-options里
区域面板属性定义与 panel 组件类型,下面是公共和新增的属性:
title string 布局面板标题文本。默认值 null。
<div data-options="
region:'north',
title:'头部标题',
split:true"
style="height:100px;">
</div>
region string 定义布局面板位置,可用的值有:north(上),south(下), east(右), west(左), center(中间)。默认值空。
<div data-options="
region:'north',
title:'头部标题',
split:true"
style="height:100px;">
</div>
border boolean 为 true 时显示布局面板边框。默认值 true。
<div data-options="
region:'north',
title:'头部标题',
border:false,
"style="height:100px;">
</div>
split boolean 为 true 时用户可以通过分割栏改变面板大小。默认值 false。
<div data-options="
region:'north',
title:'头部标题',
split:true,
"style="height:100px;">
</div>
iconCls string 一个包含图标的 CSS 类 ID,该图标将会显示到面板标题上。默认值 null。
<div data-options="
region:'north',
title:'头部标题',
iconCls:'icon-remove',
"style="height:100px;">
</div>
href string 用于读取远程站点数据的 URL 链接。默认值null。加载数据
<div data-options="
region:'north',
title:'头部标题',
href:'is_user.php',
"style="height:100px;">
</div>
collapsible boolean 定义是否显示折叠按钮。默认值 true。
<div data-options="
region:'north',
title:'头部标题',
collapsible:false,
"style="height:100px;">
</div>
minWidth number 最小面板宽度。默认值10。
<div data-options="
region:'north',
title:'头部标题',
minWidth:200,
"style="height:100px;">
</div>
minHeight number 最小面板高度。默认值10。
<div data-options="
region:'north',
title:'头部标题',
minHeight:200,
"style="height:100px;">
</div>
maxWidth number 最大面板宽度。默认值10000。
<div data-options="
region:'north',
title:'头部标题',
maxWidth:200,
"style="height:100px;">
</div>
maxHeight number 最大面板高度。默认值10000。
<div data-options="
region:'north',
title:'头部标题',
maxHeight:200,
"style="height:100px;">
</div>
最终格式
<body id="box" >
<div data-options="
region:'north',
title:'头部标题',
maxHeight:200,
split:true,
"style="height:100px;">
</div>
<div data-options="region:'south',title:'底部标题',split:true" style="height:100px;"></div>
<div data-options="region:'east',title:'右边标题',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'左边标题',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'中间标题'" style="padding:5px;background:#eee;"></div>
</body>
四.方法列表,以下在js里使用
resize none 设置布局大小。就是如果布局出现变形,可以用这个方法重置大小和布局
$(function () {
$('#box').layout({
fit:true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
$('#box').layout('resize'); //就是如果布局出现变形,可以用这个方法重置大小和布局
});
panel region 返 回 指 定 面 板 , 'region' 参 数 可 用 值 有 :'north(上),south(下), east(右), west(左),'center(中间)'。
$(function () {
$('#box').layout({
fit:true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
alert($('#box').layout('panel','east')); //返 回 指 定 面 板
});
collapse region 折 叠 指 定 面 板 。 'region' 参 数 可 用 值 有 :north(上),south(下), east(右), west(左)
$(function () {
$('#box').layout({
fit:true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
$('#box').layout('collapse','east'); //折 叠 指 定 面 板
});
expand region 展 开 指 定 面 板 。 'region' 参 数 可 用 值 有 :north(上),south(下), east(右), west(左)
$(function () {
$('#box').layout({
fit:true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
$('#box').layout('collapse','east'); //折 叠 指 定 面 板
$('#box').layout('expand','east'); //展 开 指 定 面 板
});
add options 添加指定面板。属性参数是一个配置对象,更多细节请查看选项卡面板属性。
$(function () {
$('#box').layout({
fit: true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
$('#box').layout('remove', 'east'); //移 除 指 定 面 板
$('#box').layout('add', {
title: '111', //标题
region: 'east', //添加右边
maxWidth:200 //最宽200
});
});
remove region 移 除 指 定 面 板 。 'region' 参 数 可 用 值 有 :north(上),south(下), east(右), west(左)
$(function () {
$('#box').layout({
fit: true //如果设置为 true,布局组件将自适应父容易。当使用 body 标签创建布局的时候,整个页面会自动最大。默认为 false。
});
$('#box').layout('remove','east'); //移 除 指 定 面 板
});
$.fn.layout.defaults 重写默认值对象。参照前面的章节
第二百零二节,jQuery EasyUI,Layout(布局)组件的更多相关文章
- 第二百零三节,jQuery EasyUI,Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件
jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...
- 第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置
第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置 软件版本 uwsgi- ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件
jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...
- 第二百零六节,jQuery EasyUI,Menu(菜单)组件
jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...
- 第二百零五节,jQuery EasyUI,Messager(消息窗口)组件
jQuery EasyUI,Messager(消息窗口)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 Messager(消息窗口)组件的使用方法,这个组 ...
- 第二百零四节,jQuery EasyUI,Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
随机推荐
- Oracle查询库中记录数大于2千万的所有表
Oracle查询库中记录数大于2千万的所有表 假如当前用户拥有select any table权限,则可以使用下列sql语句: select table_name, num_rows from dba ...
- 数据挖掘算法之聚类分析(二)canopy算法
canopy是聚类算法的一种实现 它是一种快速,简单,但是不太准确的聚类算法 canopy通过两个人为确定的阈值t1,t2来对数据进行计算,可以达到将一堆混乱的数据分类成有一定规则的n个数据堆 由于c ...
- Win10 系统变成黑白屏幕了怎么办?
快捷键"windows徽标键+Ctrl+C"可以切换屏幕黑白了 这是win自带的一个"应用颜色筛选器", 桌面右键,选择个性化 点到背景页面,下拉,点击&q ...
- Odoo8模块中增加延时自动消失的提示
在odoo中,如果必要栏位没有值,在保存时右上角会有如下图的提示,该提示会延时并自动关闭. 有网友问如何在自己的模块中增加这样的提示,以方便用户在操作时,能提示一些必要的信息.下面例出大致的步骤以供参 ...
- Python基础--人们一些最爱的标准库(random time)
Python继续! random 包括返回随机数的函数. 这里跟C++一样,产生的是伪随机数,并非全然随机数. random中一些重要的函数: random() 返回0<n<=1的随机数n ...
- linux c 获取网卡状态(UP or DOWN)
源代码例如以下: #include <sys/socket.h> #include <sys/ioctl.h> #include <linux/if.h> #inc ...
- 【Java】Java_08 字符型与布尔值
1.字符型(2个字节) 单引号用来表示字符常量.例如‘A’是一个字符,它与“A”是不同的,“A”表示含有一个字符的字符串 char 类型用来表示在Unicode编码表中的字符 Unicode编码被设计 ...
- userDao
比如,我们这里有一个接口IUserDao,里面有,add和del两个方法.我们在项目中,有一个他的实现类:UserDao.但是我们现在想要统一为这个接口的所有实现类都添加一个查询search方法,那么 ...
- WP8滑动条(Slider)控件的使用
1. <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinit ...
- js判段URL是否可用(js判段网络是否不可用)
下面亲自測试可行: 兼容全部浏览器,用JQuery的方法,能够判段URL是否可用.也能够判段网络是否不可用(前提:假设URL可用.返回也不是200,那就说明是网络不可用.能够以此作为网络是否可用的判段 ...