easyui Accordion 手风琴
Posted 像艳遇一样忧伤c
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui Accordion 手风琴相关的知识,希望对你有一定的参考价值。
转自:http://www.cnblogs.com/Philoo/archive/2011/10/01/jeasyui_api_accordion.html
用 $.fn.accordion.defaults 重写了 defaults。
依赖
- panel
用法示例
创建 Accordion
经由标记创建 accordion, 添加 \'easyui-accordion\' 类到 <div/> 标记。
1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
2. <div title="Title1" 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" iconCls="icon-reload" selected="true" style="padding:10px;">
8. content2
9. </div>
10. <div title="Title3">
11. content3
12. </div>
13. </div>
我们可以改变或重建 accordion 后,修改某些功能。
1. $(\'#aa\').accordion({
2. animate:false
3. });
刷新 Accordion Panel 内容
调用 \'getSelected\' 方法来获取当前 panel,然后我们可以调用 panel 的 \'refresh\' 方法去加载新内容。
1. var pp = $(\'#aa\').accordion(\'getSelected\'); // 获取选中的 panel
2. if (pp){
3. pp.panel(\'refresh\',\'new_content.php\'); // 调用 \'refresh\' 方法加载新内容
4. }
容器选项
名称 |
类型 |
说明 |
默认值 |
width |
number |
Accordion 容器的宽度。 |
auto |
height |
number |
Accordion 容器的高度。 |
auto |
fit |
boolean |
设置为 true 就使 accordion 容器的尺寸适应它的父容器。 |
false |
border |
boolean |
定义是否显示边框。 |
true |
animate |
boolean |
定义当展开折叠 panel 时是否显示动画效果。 |
true |
Panel 选项
Accordion 的 panel 选项承自 panel,下面是增加的特性:
名称 |
类型 |
说明 |
默认值 |
selected |
boolean |
设为 true 就展开 panel。 |
false |
事件
名称 |
参数 |
说明 |
onSelect |
title |
当 panel 被选中时触发。 |
onAdd |
title |
当增加一个新 panel 时触发。 |
onBeforeRemove |
title |
当移除一个 panel 之前触发,返回 false 就取消移除动作。 |
onRemove |
title |
当移除一个 panel 时触发。 |
方法
名称 |
参数 |
说明 |
options |
none |
返回 accordion 的选项。 |
panels |
none |
获取全部的 panel。 |
resize |
none |
调整 accordion 的尺寸。 |
getSelected |
none |
获取选中的 panel。 |
getPanel |
title |
获取指定的 panel。 |
select |
title |
选择指定的 panel。 |
add |
options |
增加一个新的 panel。 |
remove |
title |
移除指定的 panel。
|
以上是关于easyui Accordion 手风琴的主要内容,如果未能解决你的问题,请参考以下文章
课堂笔记 layout 布局手风琴accordion选项卡tabs