jQuery EasyUI API 中文文檔 - 手風琴（Accordion）

用 $.fn.accordion.defaults 重寫了 defaults。

panel

建立 Accordion

經由标記建立 accordion， 添加 'easyui-accordion' 類到 <div/> 标記。

1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">

2. <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">

3. <h3 style="color:#0099FF;">Accordion for jQuery</h3>

4. <p>Accordion is a part of easyui framework for jQuery.   

5.         It lets you define your accordion component on web page more easily.</p>

6. </div>

7. <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">

8.         content2  

9. </div>

10. <div title="Title3">

11.         content3  

12. </div>

13. </div>

我們可以改變或重建 accordion 後，修改某些功能。

1. $('#aa').accordion({  

2.     animate:false

3. }); 

重新整理 Accordion Panel 内容

調用 'getSelected' 方法來擷取目前 panel，然後我們可以調用 panel 的 'refresh' 方法去加載新内容。

1. var pp = $('#aa').accordion('getSelected'); // 擷取選中的 panel

2. if (pp){  

3.     pp.panel('refresh','new_content.php');  // 調用 'refresh' 方法加載新内容 

4. } 

名稱

類型

說明

預設值

width

number

Accordion 容器的寬度。

auto

height

Accordion 容器的高度。

fit

boolean

設定為 true 就使 accordion 容器的尺寸适應它的父容器。

false

border

定義是否顯示邊框。

true

animate

定義當展開折疊 panel 時是否顯示動畫效果。

Accordion 的 panel 選項承自 panel，下面是增加的特性：

selected

設為 true 就展開 panel。

參數

onSelect

title

當 panel 被選中時觸發。

onAdd

當增加一個新 panel 時觸發。

onBeforeRemove

當移除一個 panel 之前觸發，傳回 false 就取消移除動作。

onRemove

當移除一個 panel 時觸發。

options

none

傳回 accordion 的選項。

panels

擷取全部的 panel。

resize

調整 accordion 的尺寸。

getSelected

擷取選中的 panel。

getPanel

擷取指定的 panel。

select

選擇指定的 panel。

add

增加一個新的 panel。

remove

移除指定的 panel。