最近在学习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]的更多相关文章

  1. jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  2. jQuery EasyUI API - Base - Draggable [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  3. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  4. [原创汉化]linux前端神器 WebStorm8 汉化

    只汉化了linux版本 因为linux的工具没win多 不过汉化应该都通用的,自行尝试下. 汉化的不是很完全.有时间放出完全版本来.汉化是个体力活 转载随易,汉化不易,且转且注明 截图: http:/ ...

  5. [原创汉化] 价值990美元的顶级专业数据恢复软件O&O DiskRecovery 11(技术员版)汉化绿色版

    百度没搜索到11有汉化版的,有空就把它汉化了,大部分借鉴的是以前汉化版的词条.另外,顺便做了个二合一的单文件版给有需要的朋友. 运行环境: 可用于 Windows 2000/XP/2003/Vista ...

  6. Editplus注册码,汉化官方版本

    官方认证Edit+简体中文版 https://www.editplus.com/download.html EditPlus注册码在线生成 http://www.jb51.net/tools/edit ...

  7. Matplotlib API汉化 Pyplot API

    https://www.cnblogs.com/chenxygx/p/9554443.html

  8. jQuery EasyUI视频教程合集

    下载地址:http://www.fu83.cn/thread-269-1-1.html 教程内容: 尚学堂科技_jqueryeasyui视频教程_白贺翔 李炎恢jQuery EasyUI视频教程全集 ...

  9. <杂记>Android Studio 3.0-3.1 汉化包 (转载)

    JetBrains 系列软件汉化包 关键字: Android Studio 3.0-3.1 汉化包 CLion 2018.1 汉化包 GoLand 2017.3.2-2018.1 汉化包 Intell ...

随机推荐

  1. Mozilla 构建系统(转)

    英文来源:Mozilla’s Build System 中文出处:开放博客,由灰狐翻译小组制作 Mozilla 构建系统是一个非常酷的分布式系统,运行在BuildBot上.系统能在每次修改后自动重新构 ...

  2. [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 ...

  3. Mac下Jekyll安装

    之前一直用Wordpress,虽然功能强大,各种插件各种bug,如果想弄个主题,折腾得要命.最近改用jekyll+gitHub免费空间.记录一下. 我用的是Mac,所以只讲述Mac下如何安装,Wind ...

  4. (插播)unity的 异常捕捉和 ios Android 崩溃信息的捕捉。

    近期 做些准备性得工作和有意思的事情.所以近期做了一个适合ios和android 错误信息捕捉的unity插件. 两个功能,app崩溃也就是闪退 是开发人员 非常头疼的一件事,还有就是一些莫名得错误 ...

  5. NSIS:应用软件自动升级功能的探索与实践

    原文 NSIS:应用软件自动升级功能的探索与实践 记得以前轻狂曾分享过使用第三方软件实现应用软件自动升级功能 (详细http://www.flighty.cn/html/soft/20110106_1 ...

  6. 7 Ways to earn money on programming(转)

    英文原文:7 Ways to earn money on programming 几个星期前,当我收到一个自称 Someone712 的人发给我的一条消息时,我决定要写一篇如何用编程赚钱的博客文章.S ...

  7. 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 ...

  8. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  9. .NET系统开发过程中积累的扩展方法

    分享.NET系统开发过程中积累的扩展方法   .NET 3.5提供的扩展方法特性,可以在不修改原类型代码的情况下扩展它的功能.下面分享的这些扩展方法大部分来自于Code Project或是Stacko ...

  10. cocos2d-x 3.0rc1 创建project

    1.进入bin文件夹 2.打开CMD命令行窗口中输入命令,然后按Enter(-p 包名 -l 语言 -d 新project存储路径)