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

来源：互联网发布：淘宝牛仔裤店铺推荐女编辑：程序博客网时间：2024/04/30 04:47

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

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

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

使用示例

创建Accordion

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

[html] view plaincopy
<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之后来修改部分特性;

[javascript] view plaincopy
$('#aa').accordion({    
    animate:false    
});    

刷新 Accordion Panel 内容

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

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

容器选项

NameTypeDescriptionDefaultwidthnumberaccordion容器宽度 .autoheightnumberaccordion容器高度.autofitboolean设置为true,设置accordion容器大小适应它父容器的大小.falseborderboolean决定是否显示border.trueanimateboolean决定是否显示动画效果当展开或关闭panel的时候.true

Panel 选项

accordion panel选项是继承自panel,下面是新增属性:

NameTypeDescriptionDefaultselectedboolean设置为true将展开该panel.false

事件

Events

NameParametersDescriptiononSelecttitle,index当panel被选中的时候触发.onAddtitle,index当一个新的panel添加进来的时候触发.onBeforeRemovetitle,index在一个panel被移除之前触发,该方法返回false将取消移除动作.onRemovetitle,index当一个panel被移除之后触发.

方法

NameParameterDescriptionoptionsnone返回accordion的options选项.panelsnone得到所有的panel.resizenone重新调整 accordion大小.getSelectednone得到当前选中的panel.getPanelwhich得到特定的panel.这个'which'参数可以是panel的title(标题)或者是index(下标).getPanelIndexpanel得到特定的panel的下标.这个方法从1.3版本开始可用.

下面的示例代码展示如何得到一个选中的panel的下标(index).

var p = $('#aa').accordion('getSelected');if (p){        var index = $('#aa').accordion('getPanelIndex', p);        alert(index);}

selectwhich选择一个特定的 panel. 这个'which'参数可以是panel的标题(title)或者是下标(index).addoptions添加一个新的panel.默认新添加的panel将被选中.添加一个不选中的新panel, 通过 'selected' 属性
设置它为false.

示例代码:

$('#aa').accordion('add', {        title: 'New Title',        content: 'New Content',        selected: false});

removewhich移除一个特定的 panel.这个 'which'参数可以是panel的标题(title)或者是下标(index).

0 0