@author YHC
覆蓋默認值$.fn.accordion.defaults
accordion允許你提供提供多個panel每次顯示一個,所有的內置的panel都內置支持展開(expanding)和折疊(collapsing),點擊一個panel的頭部展開或者折疊
這個panel的body,panel的內容可以通過ajax加載,通過一個特定的"href"屬性.用戶可以定義一個panel讓其選中,如果沒有定義,第一個panel是默認的.
使用示例
創建Accordion
通過標記創建accordion,添加'
easyui-accordion'樣式給div標記.
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div> 我們可以改變或重新創建accordion之后來修改部分特性;
$('#aa').accordion({
animate:false
});
刷新 Accordion Panel 內容
調用'
getSelected'方法得到當前的panel,然后我們調用panel的'refresh'方法去加載新的內容:
var pp = $('#aa').accordion('getSelected'); // 得到選中panel
if (pp){
pp.panel('refresh','new_content.php'); // 調用'refresh'方法加載新的數據
}
容器選項
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | accordion容器寬度 . | auto |
| height | number | accordion容器高度. | auto |
| fit | boolean | 設置為true,設置accordion容器大小適應它父容器的大小. | false |
| border | boolean | 決定是否顯示border. | true |
| animate | boolean | 決定是否顯示動畫效果當展開或關閉panel的時候. | true |
Panel 選項
accordion panel選項是繼承自panel,下面是新增屬性:
| Name | Type | Description | Default |
|---|---|---|---|
| selected | boolean | 設置為true將展開該panel. | false |
事件
Events
| Name | Parameters | Description |
|---|---|---|
| onSelect | title,index | 當panel被選中的時候觸發. |
| onAdd | title,index | 當一個新的panel添加進來的時候觸發. |
| onBeforeRemove | title,index | 在一個panel被移除之前觸發,該方法返回false將取消移除動作. |
| onRemove | title,index | 當一個panel被移除之后觸發. |
方法
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回accordion的options選項. |
| panels | none | 得到所有的panel. |
| resize | none | 重新調整 accordion大小. |
| getSelected | none | 得到當前選中的panel. |
| getPanel | which | 得到特定的panel.這個'which'參數可以是panel的title(標題)或者是index(下標). |
| getPanelIndex | panel | 得到特定的panel的下標.這個方法從1.3版本開始可用. 下面的示例代碼展示如何得到一個選中的panel的下標(index). var p = $('#aa').accordion('getSelected');
if (p){
var index = $('#aa').accordion('getPanelIndex', p);
alert(index);
}
|
| select | which | 選擇一個特定的 panel. 這個'which'參數可以是panel的 標題(title)或者是下標(index). |
| add | options | 添加一個新的panel.默認新添加的panel將被選中.添加一個不選中的新panel, 通過 'selected' 屬性 設置它為false. 示例代碼: $('#aa').accordion('add', {
title: 'New Title',
content: 'New Content',
selected: false
});
|
| remove | which | 移除一個特定的 panel.這個 'which'參數可以是panel的標題(title)或者是下標(index). |