良玉的博客 点点滴滴,积水成河_良玉的博客_页游、手游linux运维工程师之路

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

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

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

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



使用示例

创建Accordion
通过标记创建accordion,添加'easyui-accordion'样式给div标记.
  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 plaincopy
  1. $('#aa').accordion({    

  2.     animate:false    

  3. });    

刷新 Accordion Panel 内容
调用'getSelected'方法得到当前的panel,然后我们调用panel的'refresh'方法去加载新的内容:
[javascript] view plaincopy
  1. var pp = $('#aa').accordion('getSelected'); // 得到选中panel  

  2. if (pp){    

  3.     pp.panel('refresh','new_content.php');  // 调用'refresh'方法加载新的数据  

  4. }    

容器选项

NameTypeDescriptionDefault
widthnumberaccordion容器宽度 .auto
heightnumberaccordion容器高度.auto
fitboolean设置为true,设置accordion容器大小适应它父容器的大小.false
borderboolean决定是否显示border.true
animateboolean决定是否显示动画效果当展开或关闭panel的时候.true

Panel 选项

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

NameTypeDescriptionDefault
selectedboolean设置为true将展开该panel.false

事件

Events

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

方法

NameParameterDescription
optionsnone返回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).


标签: JQUERYEASYUIACCORDION

作者:良玉 分类:Easyui 浏览:901 评论:0
留言列表
发表评论
来宾的头像