EasyUI之Layout布局
Layout布局，是按照上北，下南，左西右东，center居中的布局方式。主要属性：region设置布局的方向，style设置样式,title设置标题
依赖
- panel
- resizable
用法示例
创建 Layout
经由标记创建 Layout 。添加 \’easyui-layout\’ 类到 <div/> 标记。
1. <div id=“cc” class=“easyui-layout” style=“width:600px;height:400px;”>
2. <div region=“north” title=“North Title” split=“true” style=“height:100px;”></div>
3. <div region=“south” title=“South Title” split=“true” style=“height:100px;”></div>
4. <div region=“east” iconCls=“icon-reload” title=“East” split=“true” style=“width:100px;”></div>
5. <div region=“west” split=“true” title=“West” style=“width:100px;”></div>
6. <div region=“center” title=“center title” style=“padding:5px;background:#eee;”></div>
7. </div>
折叠 Layout Panel
1. $(\’#cc\’).layout();
2. // 折叠 west panel
3. $(\’#cc\’).layout(\’collapse\’,\’west\’);
Layout Panel 选项
|
名称 |
类型 |
说明 |
默认值 |
|
title |
string |
Layout panel 的标题文字。 |
null |
|
region |
string |
定义 layout panel 的位置，其值是下列之一：north、south、east、west、center。 |
|
|
border |
boolean |
True 就显示 layout panel 的边框。 |
true |
|
split |
boolean |
True 就显示拆分栏，用户可以用它改变panel 的尺寸。 |
false |
|
iconCls |
string |
在panel 头部显示一个图标的CSS 类。 |
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\’。 |
<div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;"> <div title="信用卡" style="padding:20px;display:none;"style="width:500px;height:250px;"> 信用卡各中心信息 </div> <div title="白金卡" closable="true" style="overflow:auto;padding:20px;display:none;"> 白金卡信息 </div> <div title="借记卡" iconCls="icon-reload" closable="true" style="padding:20px;display:none;"> 借记卡中心 </div> </div>
Accordion 手风琴
依赖
- panel
用法示例
创建 Accordion
经由标记创建 accordion， 添加 \’easyui-accordion\’ 类到 <div/> 标记。
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="后台管理" style="overflow:auto;padding:10px;"iconCls="icon-tip">
<h3 style="color:#0099FF;">个人资料信息管理</h3>
<p>理财专家、互联网金融</p>
</div>
<div title="贷款" selected="true" style="padding:10px;">
贷款
</div>
<div title="存款">
存款
</div>
</div>
容器选项
|
名称 |
类型 |
说明 |
默认值 |
|
width |
number |
Accordion 容器的宽度。 |
auto |
|
height |
number |
Accordion 容器的高度。 |
auto |
|
fit |
boolean |
设置为 true 就使 accordion 容器的尺寸适应它的父容器。 |
false |
|
border |
boolean |
定义是否显示边框。 |
true |
|
animate |
boolean |
定义当展开折叠 panel 时是否显示动画效果。 |
true |
Panel 选项
Accordion 的 panel 选项承自 panel，下面是增加的特性：
|
名称 |
类型 |
说明 |
默认值 |
|
selected |
boolean |
设为 true 就展开 panel。 |
false |
事件
|
名称 |
参数 |
说明 |
|
onSelect |
title |
当 panel 被选中时触发。 |
|
onAdd |
title |
当增加一个新 panel 时触发。 |
|
onBeforeRemove |
title |
当移除一个 panel 之前触发，返回 false 就取消移除动作。 |
|
onRemove |
title |
当移除一个 panel 时触发。 |
方法
|
名称 |
参数 |
说明 |
|
options |
none |
返回 accordion 的选项。 |
|
panels |
none |
获取全部的 panel。 |
|
resize |
none |
调整 accordion 的尺寸。 |
|
getSelected |
none |
获取选中的 panel。 |
|
getPanel |
title |
获取指定的 panel。 |
|
select |
title |
选择指定的 panel。 |
|
add |
options |
增加一个新的 panel。 |
|
remove |
title |
移除指定的 panel。 |