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。