easyUI Accordion
2012-07-31 15:56 java线程例子 阅读(583) 评论(0) 编辑 收藏 举报@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). |