EasyUI之Layout布局

视频课：https://edu.csdn.net/course/play/7621

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。