I.はじめに：
折り畳みパネル（アコーディオン）1つ以上の表示パネル（パネル）が、マルチパネル（パネル）の使用を可能にします。各パネル（パネル）が内蔵された支援拡大と崩壊します。ヘッドパネルを展開または折りたたむには、パネル（パネル）をクリックします（パネル）ボディ。パネル（パネル）内容は「HREF」属性指定のAjaxによってロードすることができます。ユーザ定義可能な選択されたパネル（パネル）。指定しない場合、デフォルトでは最初のパネル（パネル）を選択します。
第二に、ユースケース
1.モードを作成します。
ラベル付けの方法とJSプログラミングによって：easyuiコントロールは、一般的に方法を作成するには、2つの方法があります。
ラベルを作成する1.1方法：
次のように：「easyui-アコーディオン」という名前の親コンテナのdivクラスIDタグを追加し、そのパラメータは、データ・オプション属性を設定します。パネル内のパネルにそれぞれの親コンテナのdivが、各パネルは、ツリーコントロールメニューのナビゲーションを実現するために追加されたいくつかの追加コンテンツを、追加することができます。ツリー制御ノードはまた、AJAXを介してバックグラウンドから得ることができると同時に、手動で追加することができ、制御機能は、この考え方の権限に応じて行うことができます。
< DIV ID = "左" データ・オプション= "地域： '西'、タイトル： '导航菜单'、スプリット：真の" スタイル= "幅：15％;" >
< divのidは= "left_content" クラス= "easyui-アコーディオン" データ・オプション= "フィット：真の" >
< divのタイトル= "基础数据" >
< ulのクラス= "easyuiツリー" データ・オプション= "行：真の」>
< 李>组织分解结构</ 李>
<
>ユーザー管理</ 李>
</ UL >
</ divの>
< divのタイトル= "プロセス管理" >
< ULのクラス= "easyuiツリー" データ・オプション= "行：真の" >
< 李>事前定義プロセス< / 李>
< 李>プロセス監視</ 李>
</ UL >
</ divの>
< divのタイトル= "統合管理システム" データ・オプション=「行：真の」 >
< ulのクラス= "easyuiツリー" >
< 李>手動でデータを同期</ 李>
< 李>データの同期ログ</ 李>
</ UL >
</ divの>
< divのタイトル= "著作権管理" >
< ULのクラス= "ツリーeasyui「データ・オプション=」行：真の" >
< 李>役割管理</ 李>
< 李>ユーザー権利</ 李>
< 李>
<スパン>データ著作権管理</ スパン>
< UL >
< 李>データの権限に関連する構成</ 李>
< 李>データの権限バッチ処理</ 李>
</ UL >
</ 李>
</ UL >
</ DIV >
</ DIV >
</ DIV >
プログラムによって作成された1.2
$（ "＃のleft_content"）。アコーディオン（{...}）
レンダリング：
図2は、関連する属性以下、記録方法を説明しました
コンテナのプロパティ
| プロパティ名 | プロパティ値型 | 説明 | デフォルト値 |
|---|---|---|---|
| 幅 | 数 | コンテナの分類幅。 | オート |
| 高さ | 数 | コンテナの分類の高さ。 | オート |
| フィット | ブーリアン | trueに設定すると、コンテナのサイズ分類適応親コンテナ。 | 偽 |
| 境界 | ブーリアン | ボーダーかどうかを定義します。 | 真 |
| アニメーション | ブーリアン | 定义在展开和折叠的时候是否显示动画效果。 | 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'参数可以使面板的标题或者索引。 |