jQuery EasyUI API - Layout - Layout[原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记。
有没有说清楚的,或者翻译不正确的地方还请大家谅解指出。。
由于工作时间原因,每天翻译一点,最后会整理出一套帮助文档发布给大家,一起期待哈。。
还有。。。赞一下了哈~打字很累的。。(*^_^*)
Layout
覆盖默认值 $.fn.layout.defaults.
布局,最多可以有五个区域的容器:north(北), south(南), east(东), west(西) 和 center(中间),center 中间的区域是必须的,但是面板边缘区域的面板是可选的。
每一个边缘区域面板都可以通过拖动边框来调整大小,他们还可以通过点击 收缩/展开 按钮将其 收缩/展开。
布局可以嵌套,从而使用户可以构建自己需要的复杂的布局。
依赖关系
- panel
- resizable
用法示例
创建布局
1. 通过HTML标记创建布局。
为<div/>标签添加 'easyui-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. 创建嵌套布局。
请注意,里面的 west(西部的) 布局是展开的:
<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加载内容。
Layout是基于 panel 面板创建的。各地区的panel面板提供了异步加载内容的URL支持。使用异步加载技术,用户可以使自己的布局页面显示地更加“快捷”。
<body class="easyui-layout"> <div data-options="region:'west',href:'west_content.php'" style="width:180px" /> <div data-options="region:'center',href:'center_content.php'" /> </body>
收起Layout布局面板
$('#cc').layout(); // collapse the 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')} }] });
布局选项
名称 | 类型 | 描述 | 默认值 |
fit | boolean | 设置为“true”来设置它布局大小,以适应它的父级容器。当在“body”标签上创建布局Layout布局时,它将会自动最大化到整个页面的大小。 | false |
区域面板选项
区域面板选项在panel面板中定义,一面是一些常用的属性值:
名称 | 类型 | 描述 | 默认值 |
title | string | Layout布局中panel面板的标题文字。 | null |
region | string | 定义Layout布局面板的位置,该值可以是下列之一:north(北), south(南), east(东), west(西), center(中). | |
border | boolean | 设置为“true”则显示Layout布局面板的边框。 | true |
split | boolean | 设置为“true”则显示分隔符以使用户可以改变panel面板的大小。 | false |
iconCls | string | 一个icon图标css的class类,用于在panel标题上显示指定的图标。 | null |
href | string | 一个从远程站点加载数据的URL。 | null |
方法
名称 | 参数 | 描述 |
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面板,该参数是一个配置对象,详细信息请参见Tab Panel属性。 |
remove | region | 删除指定的面板,“region” 参数可能的值有:‘north'(北),'south'(南),'east'(东),'west'(西)。 |
[原创汉化,欢迎转载学习,请注明出处:]
Q空间:http://778078163.qzone.qq.com
博客园:http://www.cnblogs.com/LonelyShadow
jQuery EasyUI API - Layout - Layout[原创汉化官方API]的更多相关文章
- jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- jQuery EasyUI API - Base - Draggable [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
- [原创汉化]linux前端神器 WebStorm8 汉化
只汉化了linux版本 因为linux的工具没win多 不过汉化应该都通用的,自行尝试下. 汉化的不是很完全.有时间放出完全版本来.汉化是个体力活 转载随易,汉化不易,且转且注明 截图: http:/ ...
- [原创汉化] 价值990美元的顶级专业数据恢复软件O&O DiskRecovery 11(技术员版)汉化绿色版
百度没搜索到11有汉化版的,有空就把它汉化了,大部分借鉴的是以前汉化版的词条.另外,顺便做了个二合一的单文件版给有需要的朋友. 运行环境: 可用于 Windows 2000/XP/2003/Vista ...
- Editplus注册码,汉化官方版本
官方认证Edit+简体中文版 https://www.editplus.com/download.html EditPlus注册码在线生成 http://www.jb51.net/tools/edit ...
- Matplotlib API汉化 Pyplot API
https://www.cnblogs.com/chenxygx/p/9554443.html
- jQuery EasyUI视频教程合集
下载地址:http://www.fu83.cn/thread-269-1-1.html 教程内容: 尚学堂科技_jqueryeasyui视频教程_白贺翔 李炎恢jQuery EasyUI视频教程全集 ...
- <杂记>Android Studio 3.0-3.1 汉化包 (转载)
JetBrains 系列软件汉化包 关键字: Android Studio 3.0-3.1 汉化包 CLion 2018.1 汉化包 GoLand 2017.3.2-2018.1 汉化包 Intell ...
随机推荐
- Mozilla 构建系统(转)
英文来源:Mozilla’s Build System 中文出处:开放博客,由灰狐翻译小组制作 Mozilla 构建系统是一个非常酷的分布式系统,运行在BuildBot上.系统能在每次修改后自动重新构 ...
- [ACM] HDU 2295 Radar (二分法+DLX 重复覆盖)
Radar Problem Description N cities of the Java Kingdom need to be covered by radars for being in a s ...
- Mac下Jekyll安装
之前一直用Wordpress,虽然功能强大,各种插件各种bug,如果想弄个主题,折腾得要命.最近改用jekyll+gitHub免费空间.记录一下. 我用的是Mac,所以只讲述Mac下如何安装,Wind ...
- (插播)unity的 异常捕捉和 ios Android 崩溃信息的捕捉。
近期 做些准备性得工作和有意思的事情.所以近期做了一个适合ios和android 错误信息捕捉的unity插件. 两个功能,app崩溃也就是闪退 是开发人员 非常头疼的一件事,还有就是一些莫名得错误 ...
- NSIS:应用软件自动升级功能的探索与实践
原文 NSIS:应用软件自动升级功能的探索与实践 记得以前轻狂曾分享过使用第三方软件实现应用软件自动升级功能 (详细http://www.flighty.cn/html/soft/20110106_1 ...
- 7 Ways to earn money on programming(转)
英文原文:7 Ways to earn money on programming 几个星期前,当我收到一个自称 Someone712 的人发给我的一条消息时,我决定要写一篇如何用编程赚钱的博客文章.S ...
- Codeforces Round #254 (Div. 2):A. DZY Loves Chessboard
A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- .NET系统开发过程中积累的扩展方法
分享.NET系统开发过程中积累的扩展方法 .NET 3.5提供的扩展方法特性,可以在不修改原类型代码的情况下扩展它的功能.下面分享的这些扩展方法大部分来自于Code Project或是Stacko ...
- cocos2d-x 3.0rc1 创建project
1.进入bin文件夹 2.打开CMD命令行窗口中输入命令,然后按Enter(-p 包名 -l 语言 -d 新project存储路径)