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>  

EasyUI之Layout布局

折叠 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>


EasyUI之Layout布局


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。

EasyUI之Layout布局 


上一篇:关于看美剧学英语的,强烈推荐的清单


下一篇:Config 多账户多区域数据聚合