JQUERY EASYUI 可折叠标签(ACCORDION)用法

覆盖默认值$.fn.accordion.defaults

accordion允许你提供提供多个panel每次显示一个,所有的内置的panel都内置支持展开(expanding)和折叠(collapsing),点击一个panel的头部展开或者折叠

这个panel的body,panel的内容可以通过ajax加载,通过一个特定的"href"属性.用户可以定义一个panel让其选中,如果没有定义,第一个panel是默认的.

使用示例

创建Accordion

通过标记创建accordion,添加' easyui-accordion'样式给div标记.

[html]  view plain copy

1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">    
2.     <div title="Title1" data-options="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" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">    
8.         content2    
9.     </div>    
10.     <div title="Title3">    
11.         content3    
12.     </div>    
13. </div>   

我们可以改变或重新创建accordion之后来修改部分特性;

[javascript]  view plain copy

1. $('#aa').accordion({    
2.     animate:false    
3. });    

刷新 Accordion Panel 内容

调用' getSelected'方法得到当前的panel,然后我们调用panel的'refresh'方法去加载新的内容:

[javascript]  view plain copy

1. var pp = $('#aa').accordion('getSelected'); // 得到选中panel  
2. if (pp){    
3.     pp.panel('refresh','new_content.php');  // 调用'refresh'方法加载新的数据  
4. }    

容器选项

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).