php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站

Layout(布局)

使用$.fn.layout.defaults重写默认值对象。

布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。

%5Cjeasyui%5Cuploads%5Cdocument%5Clayout%5Clayout-001.png

创建布局

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");

%5Cjeasyui%5Cuploads%5Cdocument%5Clayout%5Clayout-002.png

unsplit

region

移除指定面板。'region'参数可用值有:'north','south','east','west'。(该方法自1.4.2版开始可用)

代码示例:

$("#layout").layout("unsplit", "west");

%5Cjeasyui%5Cuploads%5Cdocument%5Clayout%5Clayout-003.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bootstrap系列 -- 11. 基础表单

表单主要功能是用来与用户做交流的一个网页控件&#xff0c;良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括&#xff1a;文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同&#xff0c;而且不同的浏览器对…

python excel centos_centos中使用python遇到的几个问题

用python搞了一个从excel中读取cobbler节点信息并加入cobbler中的脚本&#xff0c;运行的过程中出了不少问题&#xff0c;这里记录下来&#xff0c;方便日后查找&#xff01;一、yum install python&#xff0c;我通过这个命令安装python&#xff0c;默认安装的是2.6的版本&…

oracle集群监听启动,在RAC中lsnrctl和srvctl操作监听区别

朋友今天询问了一个问题RAC中使用srvctl 操作监听和lsnrctl 操作监听结果不一样&#xff0c;下面我通过实验说明问题0.listener.ora文件内容LISTENER_RAC1 (DESCRIPTION_LIST (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST rac1-vip)(PORT 1521)(IP FIRST))(ADDRESS (PROTO…

how to use webpart container in kentico

https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-web-part-containers Webpart Container webpart container中的orangebox, SELECT * FROM dbo.CMS_WebPartContainer WHERE ContainerDisplayName LIKE %orange%; 把…

IE通过推理IE陈述的版本号

样例&#xff1a; 1. <!--[if !IE]> 除IE外都可识别 <![endif]--> 2. <!--[if IE]> 全部的IE可识别 <![endif]--> 3. <!--[if IE 5.0]> 仅仅有IE5.0能够识别 <![endif]--> 4. <!--[if IE 5]> 仅IE5.0与IE5.5能够识别 <![endif]--…

自己调试接口遇到的错误记录

200 请求成功500 请求失败 失败原因在http body里面403 未认证404 服务未找到 转载于:https://www.cnblogs.com/ruixin-jia/p/5734767.html

excel如何找到高频词_拟录取后:应届生和往届生档案哪里找;重灾院校区;高频词背诵表...

今日消息1、应届生和往届生档案哪里找&#xff1f;2、重灾院校区3、考研云督学班高频词背诵表汇总1、应届生和往届生档案哪里找&#xff1f;往年这个时候论文答辩、复试已经结束&#xff0c;已经进入毕业季&#xff01;现在你们毕业答辩结束了吗&#xff1f;你们都顺利上岸吗&a…

oracle 中表,oracle中表操作

1.1&#xff1a;创建一表空间 TABLESPACE01,初始大小50MB,允许自动增长数据库文件,每次增长10MBCREATE TABLESPACE TABLESPACE01LOGGINGDATAFILE’F:\TABLESPACE\DATA01.DBF’ SIZE 50MREUSE AUTOEXTEND ON NEXT 10M;1.2:创建用户 (oracle12c)此处创建用户报错&#xff0c;原因…

UDP Ping程序实现--第2关:接收并转发消息

✨创作不易&#xff0c;还希望各位大佬支持一下 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01; 任务描述 本关任务&#xff1a;在…

JAVA经典题--死锁案例

死锁原理: 两个线程相互等待对方释放同步监视器 例子程序: 1 public class TestDeadLock implements Runnable {2 3 public int flag 1;4 static Object o1 new Object(), o2 new Object();5 6 public void run() {7 if (flag 1) {8 s…

考研编程练习----排名

题目描述&#xff1a;今天的上机考试虽然有实时的Ranklist&#xff0c;但上面的排名只是根据完成的题数排序&#xff0c;没有考虑每题的分值&#xff0c;所以并不是最后的排名。给定录取分数线&#xff0c;请你写程序找出最后通过分数线的考生&#xff0c;并将他们的成绩按降序…

linux下安装dovecot

Dovecot是一个开源的&#xff0c;为Linux/Unix-like系统提供IMAP,POP3服务的软件。主要是为了安全产生的&#xff0c;不管大小应用&#xff0c;Dovecot都是一个非常优秀的选择。它非常快&#xff0c;配置简单&#xff0c;不需要专业的管理员&#xff0c;而且它也非常节省内存。…

放大镜_指甲钳上有放大镜?再也不怕夹到肉了

扒姬说&#xff1a;剪指甲钳最害怕什么&#xff0c;是没注意夹到肉有没有。尤其是近视的人和手脚不便的老人&#xff0c;或者是给较小的宝宝剪指甲时&#xff0c;总是看不清指甲边缘的形状、刀口的位置&#xff0c;一不小心就会夹到手指、脚趾。今天&#xff0c;扒姬推荐一个特…

linux学习规划

转载于:https://www.cnblogs.com/Alight/p/4601510.html

oracle如何在本地建库,oracle在本地建库

oracle数据库本地建库&#xff0c;需要使用oracle安装路径下面的-配置和移植工具-Database Configuration Assistant 通过一次点击下一步进行建库。 在库建好后&#xff0c;使用系统账号 User:sys password:sys Connect as SYSDBA在客户端进行登录 --创建表空间 Create tablesp…

「BZOJ1485」[HNOI2009] 有趣的数列 (卡特兰数列)

「BZOJ1485」[HNOI2009] 有趣的数列 Description 我们称一个长度为2n的数列是有趣的&#xff0c;当且仅当该数列满足以下三个条件&#xff1a; (1)它是从1到2n共2n个整数的一个排列{ai}&#xff1b; (2)所有的奇数项满足a1<a3<…<a2n-1&#xff0c;所有的偶数项满足a2…

wedo2.0编程模块介绍_能量黑科技模块系列十:RFID魔块

RFID魔块RFID此模块可以对套件配套的RFID卡或者空白RFID卡进行读写&#xff0c;用于权限验证的DIY制作。常规的公交卡、地铁卡是无法进行写入&#xff0c;但可以读取UID号。配套RFID卡内存为1K&#xff0c;有16个分区&#xff0c;每个分区有3个数据块可进行写入此模块可以对套件…

Android 6.0权限问题

Android 6.0 open failed: EACCES (Permission denied) 对于6.0权限问题&#xff0c;报错如上&#xff1a; 解决方案&#xff1a; Android 6.0 (Marshmallow). 添加新的权限模型&#xff0c;需要在运行时动态获取所需要的权限。 首先判断手机系统版本是否在6.0然后才是支持运行…

[SoapUI] 通过SoapUI发送POST请求,请求的body是JSON格式的数据

通过SoapUI发送POST请求&#xff0c;请求的body是JSON格式的数据&#xff1a; data{"currentDate":"2015-06-19","reset":true} 而且通过Fiddler抓取页面报文 Content-Type 是 application/x-www-form-urlencoded 一开始我将Content-Type appl…

oracle -239报错,解决: ./check_oracle_health --connect orcl --mode connection-time 报错的问题...

错误提示./check_oracle_health --connect orcl --mode connection-timeCRITICAL - cannot connect to orcl. install_driver(Oracle) failed: Cant locate DBD/Oracle.pm in INC (INC contains: . /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_per…