一、前言：
折疊面板（accordion）允許使用多面板（panel），同時顯示一個或多個面板（panel）。每個面板（panel）都有展開和折疊的內建支持。點擊面板（panel）頭部可展開或折疊面板（panel）主體。面板（panel）內容可通過 ajax 指定 'href' 屬性來加載。用戶可定義被選中的面板（panel）。如果未指定，則默認選中第一個面板（panel）。
二、使用實例
1、創建方式
easyui 中的控件一般有兩種創建方式：通過標簽的方式以及js編程的方式。
1.1標簽的方式創建：
如下所示：給父容器div標簽添加一個名為“easyui-accordion”的類ID，通過data-options屬性來設置其參數。父容器中的每個div為一個面板，在面板中又可以增加一些其他的內容，在這里是每個面板中加了一個樹控件來實現菜單導航。樹控件中的節點可以手動添加同時也可以通過ajax的方式從后台獲取，可以按照這個思路來進行功能權限的控件。
<div id="left" data-options="region:'west',title:'導航菜單',split:true" style="width: 15%;">
<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>
</ul>
</div>
<div title="系統集成管理" data-options="lines: true">
<ul class="easyui-tree">
<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>
</div>
1.2通過編程的方式創建
$("#left_content").accordion({...})
效果圖：
2、下面對相關的屬性、方法進行記錄說明
2.1 容器屬性
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| 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 |
2.2 面板屬性
分類面板屬性繼承自panel(面板)，分類面板新增的屬性如下：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| selected | boolean | 如果設置為true將展開面板。 | false |
| collapsible | boolean | 如果設置為true將顯示折疊按鈕。 | true |
2.2.1 事件
| 事件名 | 事件參數 | 描述 |
|---|---|---|
| onSelect | title,index | 在面板被選中的時候觸發。 |
| onUnselect | title,index | 在面板被取消選中的時候觸發。（該方法自1.3.5版開始可用） |
| onAdd | title,index | 在添加新面板的時候觸發。 |
| onBeforeRemove | title,index | 在移除面板之前觸發，返回false可以取消移除操作。 |
| onRemove | title,index | 在面板被移除的時候觸發。 |
2.2.2 方法
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| 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'參數可以使面板的標題或者索引。 |