EasyUI的布局管理

来源：互联网发布：linq to sql 编辑：程序博客网时间：2024/06/01 09:32

布局的容器，有五个区域：北部，南部，东部，西部和中心。的中心区域的面板是必需的，但边缘区域的面板是可选的。每一个边缘区域面板可以调整大小，拖动其边界，他们也可以折叠一下它的崩溃触发。可以嵌套的布局，从而用户可以建立他想要什么复杂的布局。

　　继承：面板（panel）、可调整大小（resizable）

用法示例
　　创建布局
　　1、通过标记创建布局。添加'easyui的布局类的标记的<div/>

<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、创建整个页面的布局。

<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、创建嵌套布局。注意，西部面板布局内收缩。

<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
创建基于面板的布局。每个区域面板提供内置支持异步加载内容从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>

Collpase布局面板

$('#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')}       }]   });

布局选项

Name

Type

描述

默认值

fit

boolean

设置为true，以适应它的父容器设置布局大小。当创建布局“体”标记时，它会自动最大化整个页面的完整大小

false

　　地区面板选项，该地区的控制面板选项中定义的面板组件，下面是一些常见的和增值的属性：

Name

Type

描述

默认值

title

string

布局面板的标题文字。

null

region

string

定义布局面板的位置，该值是下列之一：北，南，东，西，中心。

border

boolean

真正的显示布局面板边框。

true

split

boolean

真正显示拆分栏，用户可以改变面板的大小。

false

iconCls

string

一个图标CSS类显示面板上的头一个图标。

null

href

string

一个URL加载数据从远程站点。

null

collapsible

boolean

定义是否显示可折叠按钮。

true

minWidth

number

最小面板宽度。

minHeight

number

面板的最小高度。

maxWidth

number

的最大面板宽度。

10000

maxHeight

number

最大面板高度。

10000

　　方法：

Name

参数

Description

resize

none

设置布局大小。

panel

region

返回指定的面板，'区域'参数可能的值：'北'，'南'，'东'，'西'，'中心'。

collapse

region

关闭指定的面板，'区域'参数可能的值：'北'，'南'，'东'，'西'。

expand

region

展开指定的面板，'区域'参数可能的值：'北'，'南'，'东'，'西'。

add

options

添加一个指定的面板，选项参数是一个配置对象，标签面板属性，更多的细节。

remove

region

删除指定的面板，'区域'参数可能的值：'北'，'南'，'东'，'西'。