jQuery EasyUI API - Layout - Layout[原创汉化官方API]

时间：2023-03-09 05:02:25
jQuery EasyUI API - Layout - Layout[原创汉化官方API]

最近在学习jQuery EasyUI，发现中文的文档好少，部分文档不错但它是鸟语的，为了大家也为了自己学习吧，汉化做一下笔记。

有没有说清楚的，或者翻译不正确的地方还请大家谅解指出。。

由于工作时间原因，每天翻译一点，最后会整理出一套帮助文档发布给大家，一起期待哈。。

还有。。。赞一下了哈~打字很累的。。(*^_^*)

Layout

覆盖默认值 $.fn.layout.defaults.

　　布局，最多可以有五个区域的容器：north(北), south(南), east(东), west(西) 和 center(中间)，center 中间的区域是必须的，但是面板边缘区域的面板是可选的。

　　每一个边缘区域面板都可以通过拖动边框来调整大小，他们还可以通过点击 收缩/展开 按钮将其 收缩/展开。

　　布局可以嵌套，从而使用户可以构建自己需要的复杂的布局。

jQuery EasyUI API - Layout - Layout[原创汉化官方API]

依赖关系

  • 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'(西)。

[原创汉化，欢迎转载学习，请注明出处：]

Ｑ空间：http://778078163.qzone.qq.com
博客园：http://www.cnblogs.com/LonelyShadow

相关文章