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

目录
相关文章
|
1月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
1月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
8月前
|
Web App开发 JavaScript 前端开发
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
|
9月前
|
存储 JavaScript 前端开发
jQuery 常用API
jQuery 常用API
35 0
|
10月前
|
缓存 JavaScript 程序员
jQuery 常用API 3
jQuery 常用API
61 0
|
10月前
|
JavaScript 前端开发 API
jQuery 常用API 2
jQuery 常用API
60 0
|
10月前
|
JavaScript API
jQuery 常用API 1
jQuery 常用API
59 0
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
85 0
|
JSON JavaScript 前端开发
JQuery常用API(未完,持续更新)
JQuery常用API(未完,持续更新)
JQuery常用API(未完,持续更新)
|
JSON 前端开发 JavaScript
【前端】使用jQuery实现一个简单的在线页面或API接口请求功能
对于测试人员来说,借助一些测试工具非常的重要,像postman等工具,很方便就能发起api接口的请求和测试 但是,对于开发人员来说,有时候未必一开始就使用这些工具,有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况,本篇文章就来简单实现下在线页面发起http的get或post请求的功能 作者:全栈小5 链接:https://juejin.cn/post/7107132057263800327 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
367 0