php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局)
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
创建布局
1. 通过标签创建布局
为< div/>标签增加名为'easyui-layout'的类ID。
2. 使用完整页面创建布局
3. 创建嵌套布局
注意:嵌套在内部的布局面板的左侧(西面)面板是折叠的。
4. 通过ajax读取内容
布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术,用户可以使自己的布局页面显示的内容更多更快。
折叠布局面板
$('#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')}
}]
});
属性名
属性值类型
描述
默认值
fit
boolean
如果设置为true,布局组件将自适应父容器。当使用'body'标签创建布局的时候,整个页面会自动最大。
false
事件名
事件参数
描述
onCollapse
region
在折叠区域面板的时候触发。(该事件自1.4.4版开始可用)
onExpand
region
在展开区域面板的时候触发。(该事件自1.4.4版开始可用)
onAdd
region
在新增区域面板的时候触发。(该事件自1.4.4版开始可用)
onRemove
region
在移除区域面板的时候触发。(该事件自1.4.4版开始可用)
区域面板属性定义与panel组件类似,下面的是公共的和新增的属性:
属性名
属性值类型
描述
默认值
title
string
布局面板标题文本。
null
region
string
定义布局面板位置,可用的值有:north, south, east, west, center。
border
boolean
为true时显示布局面板边框。
true
split
boolean
为true时用户可以通过分割栏改变面板大小。
false
iconCls
string
一个包含图标的CSS类ID,该图标将会显示到面板标题上。
null
href
string
用于读取远程站点数据的URL链接
null
collapsible
boolean
定义是否显示折叠按钮。(该属性自1.3.3版开始可用)
true
minWidth
number
最小面板宽度。(该属性自1.3.3版开始可用)
10
minHeight
number
最小面板高度。(该属性自1.3.3版开始可用)
10
maxWidth
number
最大面板宽度。(该属性自1.3.3版开始可用)
10000
maxHeight
number
最大面板高度。(该属性自1.3.3版开始可用)
10000
expandMode
string
在点击折叠面板时候的扩展模式。可用值有:“float”、“dock”和null
float:区域面板将展开并浮动在顶部,在鼠标焦点离开面板时会自动隐藏。
dock:区域面板将展开并钉在面板上,在鼠标焦点离开面板时不会自动隐藏。
null:什么也不会发生。
(该属性自1.4.4版开始可用)
float
collapsedSize
number
折叠后的面板大小。(该属性自1.4.4版开始可用)
28
hideExpandTool
boolean
为true时隐藏折叠面板上的扩展面板工具。(该属性自1.4.4版开始可用)
false
hideCollapsedContent
boolean
为true时隐藏折叠面板上的标题栏。(该属性自1.4.4版开始可用)
true
collapsedContent
string,function(title)
定义在折叠面板上要显示标题内容。
1. 标题字符串;
2. 通过函数返回标题内容。
(该方法自1.4.4版开始可用)
代码示例:
collapsedContent: function(title){
var region = $(this).panel('options').region;
if (region == 'north' || region == 'south'){
return title;
} else {
return '
'+title+'
';
}
}
方法名
方法参数
描述
resize
param
设置布局大小。param对象包含如下属性:
width:布局宽度。
height:布局高度。
代码示例:
$('#cc').layout('resize', {
width:'80%',
height:300
})
panel
region
返回指定面板,'region'参数可用值有:'north','south','east','west','center'。
collapse
region
折叠指定面板。'region'参数可用值有:'north','south','east','west'。
expand
region
展开指定面板。'region'参数可用值有:'north','south','east','west'。
add
options
添加指定面板。属性参数是一个配置对象,更多细节请查看选项卡面板属性。
remove
region
移除指定面板。'region'参数可用值有:'north','south','east','west'。
split
region
分割区域面板。'region'参数可用值有:'north','south','east','west'。(该方法自1.4.2版开始可用)
代码示例:
$("#layout").layout("split", "west");
unsplit
region
移除指定面板。'region'参数可用值有:'north','south','east','west'。(该方法自1.4.2版开始可用)
代码示例:
$("#layout").layout("unsplit", "west");
php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站相关推荐
- JQuery DataGrid 中文文档
数据表格 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值. 依赖关系 控制面板 缩放 链接按钮 分页 使用方法 <table id=&qu ...
- php stortime,文件存储 - Laravel 5.8 中文文档手册 - php中文网手册
文件存储 简介 Laravel 提供了一个强大的文件系统抽象,这得益于 Frank de Jonge 强大的 Flysystem 扩展包.Laravel 文件系统集成为使用本地文件系统.Amazon ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 def ...
- ASP.NET Core 中文文档 第三章 原理(3)静态文件处理
原文:Working with Static Files 作者:Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay).孟帅洋(书缘) 静态文 ...
- aspose excel中文文档_除了VBA,还有哪些编程语言可以操作Excel文件?
Excel(Microsoft office)是现在最常用的办公软件,主要涉及电子表格制作.数据处理.报表输出展示以及更高端的还有金融建模等:我们知道,在需要批处理多个Excel工作表以及工作簿的时候 ...
- python-docx中文文档之文件类
python-docx中文文档之文档类 文章目录 python-docx中文文档之文档类 ###文档类 这是一篇推荐的入门文章:python-docx 使用教程 官方的文档在这里. ###文档类 文档 ...
- thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
Node 端使用 $ npm install nunjucks 0 $npminstallnunjucks 下载后可直接 require('nunjucks') 使用 浏览器端使用 可直接使用 nun ...
- jQuery EasyUI API 中文文档 - 布局(Layout)
依赖 panel resizable 用法示例 创建 Layout 经由标记创建 Layout .添加 'easyui-layout' 类到 <div/> 标记. 1. <div ...
- android 查找所有dialog_android 布局文件layout分组的简单使用
我们在实际的项目中随着项目的不断迭代,layout的布局文件会不断增多,查找修改非常不方便. 之前我们经常用到方法就是在xml布局文件前加上标识前缀来区分,比如 activity_****.xml.现 ...
最新文章
- 初学Hadoop之图解MapReduce与WordCount示例分析
- -16 | 12 等于多少
- 如何实现一个定时的任务,并且可以自己停止
- R语言stringr包str_extract函数检查数据是否包含特定模式实战
- Linux 虚拟化网络技术 — 虚拟网络协议栈
- Linux引导过程与服务控制、排障演示及运行级别(详细图解)
- 利用单臂路由实验VLAN间路由
- 数据结构--线性表顺序存储(顺序表)
- jenkins 通过批处理自动构建 非标准项目
- recovery编译问题汇总
- HTML5的touch事件
- python如何输入空行_在python中,如何在接受用户输入时跳过空行?
- 02-普通轮播图-上下滚动
- 我的天哪我有博客了!
- 麦亡9什么时候能装鸿蒙系统,距断供不到10天 麒麟9000即将绝版 华为大招来了:不止鸿蒙2.0...
- 【剑指offer】题目20 顺时针打印矩阵
- 工作笔记(python给excel加密)
- 大白话云计算,大数据,人工智能
- 骁龙8+gen1和天玑9000+区别 骁龙8+和天玑9000+评测选哪个好
- http简介以及常见知识和http请求头,响应头,状态码,内容类型对照表分享(超实用)