一、前言：
在開發一個后台管理系統時，為了實現菜單導航功能，在網上搜索下，覺得easyui 的accordion 控件實現的效果還可以所有就用上了，在這里記錄一下該控件的基本使用方法。
分類控件（accordion）允許使用多面板，每個面板都內建支持展開和折疊功能。點擊一個面板的標題將會展開或折疊面板主體。可以通過面板指定的'href'屬性使用ajax方式讀取面板內容。用戶可以定義一個默認選中的面板，如果未指定則第一個就是默認的。
二、使用實例
1、創建方式
easyui 中的控件一般有兩種創建方式：通過標簽的方式以及js編程的方式。
1.1標簽的方式創建：
如下所示：給父容器div標簽添加一個名為“easyui-accordion”的類ID,通過data-options屬性來設置其參數，具體的參數說明見下面。父容器中的每個div為一個面板，在面板中又可以增加一些其他的內容，在這里我是每個面板中加了一個樹控件來實現菜單導航。樹控件中的節點可以手動添加同時也可以通過ajax的方式從后台獲取，可以按照這個思路來進行功能權限的控件，這方面的以后在做總結。
<div id="left_content" class="easyui-accordion" data-options="fit:true"> <div title="基礎數據"> <ul class="easyui-tree" data-options="lines: true"> <li>組織分解結構</li> <li>崗位分解結構</li> <li>用戶管理</li> </ul> </div> <div title="權限管理"> <ul class="easyui-tree" data-options="lines: true"> <li>角色管理</li> <li>用戶權限分配</li> <li> <span>數據權限管理</span> <ul> <li>數據權限關聯配置</li> <li>數據權限批量處理</li> </ul> </li> </ul> </div> <div title="流程管理"> <ul class="easyui-tree" data-options="lines: true"> <li>流程預定義</li> <li>流程監控</li> </ul> </div> <div title="系統集成管理" data-options="lines: true"> <ul class="easyui-tree"> <li>手動同步數據</li> <li>數據同步日志</li> </ul> </div> </div>
1.2通過編程的方式創建
$("#left_content").accordion({...})
通過上面的步驟能實現一個基本的功能。
效果圖：
2、下面對相關的屬性、方法進行記錄說明
容器屬性
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| width | number | 分類容器的寬度。 | auto |
| height | number | 分類容器的高度。 | auto |
| fit | boolean | 如果設置為true，分類容器大小將自適應父容器。 | false |
| border | boolean | 定義是否顯示邊框。 | true |
| animate | boolean | 定義在展開和折疊的時候是否顯示動畫效果。 | true |
| multiple | boolean | 如果為true時，同時展開多個面板。（該屬性自1.3.5版開始可用） | false |
| selected | number | 設置初始化時默認選中的面板索引號。（該屬性自1.3.5版開始可用） | 0 |
面板屬性
分類面板屬性繼承自panel(面板)，分類面板新增的屬性如下：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| selected | boolean | 如果設置為true將展開面板。 | false |
| collapsible | boolean | 如果設置為true將顯示折疊按鈕。 | true |
事件
| 事件名 | 事件參數 | 描述 |
|---|---|---|
| onSelect | title,index | 在面板被選中的時候觸發。 |
| onUnselect | title,index | 在面板被取消選中的時候觸發。（該方法自1.3.5版開始可用） |
| onAdd | title,index | 在添加新面板的時候觸發。 |
| onBeforeRemove | title,index | 在移除面板之前觸發，返回false可以取消移除操作。 |
| onRemove | title,index | 在面板被移除的時候觸發。 |
方法
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| options | none | 返回分類組件的屬性。 |
| panels | none | 獲取所有面板。 |
| resize | none | 調整分類組件大小。 |
| getSelected | none | 獲取選中的面板。 |
| getSelections | none | 獲取所有選中的面板。（該方法自1.3.5版開始可用） |
| getPanel | which | 獲取指定的面板，'which'參數可以是面板的標題或者索引。 |
| getPanelIndex | panel | 獲取指定面板的索引。（該方法自1.3版開始可用） 以下示例顯示如何獲取選中面板的索引。 var p = $('#aa').accordion('getSelected');
if (p){
var index = $('#aa').accordion('getPanelIndex', p);
alert(index);
}
|
| select | which | 選擇指定面板。'which'參數可以是面板標題或者索引。 |
| unselect | which | 取消選擇指定面板。'which'參數可以是面板標題或者索引。（該方法自1.3.5版開始可用） |
| add | options | 添加一個新面板。在默認情況下，新增的面板會變成當前面板。如果要添加一個非選中面板，不要忘記將'selected'屬性設置為false。 代碼示例： $('#aa').accordion('add', {
title: '新標題',
content: '新內容',
selected: false
});
|
| remove | which | 移除指定面板。'which'參數可以使面板的標題或者索引。 |
三、總結
不積跬步，無以至千里！