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

如何在 jQuery 中编写手风琴式 JavaScript

Twitter Bootstrap 100% 高度手风琴“跳跃”

使用jQuery开发accordion手风琴插件

手风琴不会塌陷

EasyUI系列学习-Accordion(分类)