@author YHC
覆盖默认值$.fn.accordion.defaults
accordion允许你提供提供多个panel每次显示一个,所有的内置的panel都内置支持展开(expanding)和折叠(collapsing),点击一个panel的头部展开或者折叠
这个panel的body,panel的内容可以通过ajax加载,通过一个特定的"href"属性.用户可以定义一个panel让其选中,如果没有定义,第一个panel是默认的.
使用示例
创建Accordion
通过标记创建accordion,添加'easyui-accordion'样式给div标记.
Accordion for jQuery
Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.
content2
content3
$('#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).
以上如果有错误信息,请指出,thanks!