jQuery EasyUI API 中文文档 - 手风琴(Accordion)-阿里云开发者社区

开发者社区> 天伟> 正文

jQuery EasyUI API 中文文档 - 手风琴(Accordion)

简介: Accordion 手风琴 用 $.fn.accordion.defaults 重写了 defaults。 依赖 panel 用法示例 创建 Accordion 经由标记创建 accordion, 添加 'easyui-accordion' 类到 标记。
+关注继续查看

Accordion 手风琴

$.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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4014 0
jquery插件制作 -- 6.手风琴Panel
  我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。   首先我们还是创建一个html文件,里面包含如下的html结构。        first pane     this script should allow only one pane to be visible at a time.
866 0
jQuery EasyUI API 中文文档 - 对话框(Dialog)
Dialog 对话框 扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。 依赖 window linkbutton 用法 1. 2.     Dialog Content.   3. 1. $('#dd').dialog({   2.     modal:true 3. });  特性 其特性扩展自 window,下列是为 dialog 重写的特性。
727 0
下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 下拉.gif 代码如下: 下拉菜单 li{ width: 80px; ...
909 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5688 0
jQuery EasyUI API 中文文档 - 窗口(Window)
Window 窗口    扩展自 $.fn.panel.defaults,用 $.fn.window.defaults 重写了 defaults。 依赖 draggable resizable panel 用法 1.
617 0
jQuery EasyUI API 中文文档 - 时间微调器(TimeSpinner)
TimeSpinner 时间微调器 扩展自 $.fn.spinner.defaults,用 $.fn.timespinner.defaults 重写了 defaults。 依赖 spinner 用法 1. 1. $('#ss').timespinner({   2.     showSeconds:true 3. });  特性 其特性扩展自 spinner,下列是为 timespinner 增加的特性。
719 0
jQuery EasyUI API 中文文档 - 树(Tree)
Tree 树 用 $.fn.tree.defaults 重写了 defaults。 依赖 draggable droppable 用法 Tree 能在 元素里定义,此标记可以定义为叶节点和子节点。
902 0
jQuery EasyUI API 中文文档 - 消息框(Messager)
Messager 消息框 用 $.messager.defaults 重写了 defaults。 依赖 window linkbutton progressbar 用法 1.
761 0
+关注
天伟
一个普通程序员
274
文章
198
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载