1.1 active
这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。初始化设置例:$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例:
//获取 var active = $('#accordion').accordion('option', 'active');//设置 $('#accordion').accordion('option', 'active', 2);
注:设置小于0,默认第一个,大于总数,默认关闭;
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果,或不使用动画效果(设置false),除了默认设置,使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化设置例: $('#accordion').accordion({ animated: 'easeslide' });
在初始化之后的获取和设置例:
//获取
var animated = $('#accordion').accordion('option', 'animated');
//设置
$('#accordion').accordion('option', 'animated', 'easeslide');
1.3 autoHeight 默认是true,如果设置,所有内容部分的高被设定为其中最高内容的高。 初始化设置:$('#accordion').accordion({ autoHeight: false });
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false,似乎是清除style,哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例:$('#accordion').accordion(event:"mouseover");
初始化后的设置请参考上面的 ,此处省略。。。
1.6 fillSpace ,充满父元素的高,默认为false ,使用此项,autoHeight无效。
初始化设置例:$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ,此处省略。。。
1.7 header,设置头元素(见上面实例),默认值为:'> li > :first-child,> :not(li):even'
此处省略,自己理解。。。
1.8 icon,设置小图标,默认值为: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外,请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller
初始化设置例:$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的,回头再说吧。。。
2 事件
2.1 change事件 accordion改变时触发的事件,有两种绑定方法
第一种:
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种:
$('#accordion').accordion({
change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。
3 方法
3.1 destroy :毁灭地球...
使用方法:.accordion( 'destroy' )
3.2 disable:accordion不可用,使之无效。
使用方法:.accordion('disable')
3.3 enable: 可用,使之有效,使用方法:略...
3.4 option:参数,使用方法:前面都已经用过了,例:.accordion( 'option' , optionName , [value] )
3.5 activate:也是设置默认选项,和参数active 作用一样。例:.accordion( 'activate' , index )
分享到:
相关推荐
jQuery UI Accordion是一款非常流行的JavaScript库,用于创建交互式的折叠菜单。这个组件使得网页内容能够以一种有序且节省空间的方式展现,用户可以逐个展开或关闭各个部分,从而提高用户体验。在本文中,我们将...
除了基本配置,jQuery UI Accordion 还提供了一些其他可选参数,例如 `icons` 可以设置展开和折叠状态的图标,`event` 可以自定义触发展开/折叠的事件,`heightStyle` 控制 Accordion 的高度策略等。通过灵活地调整...
这个中文帮助文档是针对jQuery UI的详细指南,旨在帮助开发者更好地理解和使用这个强大的工具集。 ### 1. jQuery UI 的主要功能 jQuery UI 包含了多种功能模块,包括但不限于: - **TABS(选项卡)**: 提供了一种...
其中,jQuery UI中的Accordion组件是一种常见的交互元素,它将多个内容区块折叠在一个有限的空间内,用户可以逐个展开查看。本文将深入探讨jQuery Accordion的源码,帮助开发者理解其工作原理,以便于自定义和优化。...
2. **Accordion(手风琴)**:手风琴组件允许内容以折叠/展开的方式呈现,节省页面空间,用户可以根据需要查看详细信息。 3. **Dialog(对话框)**:对话框组件创建可自定义的模态或非模态窗口,用于提示、确认、...
在本文中,我们将详细探讨`jquery-ui.css`和`jquery-ui.js`这两个关键文件,并讨论如何在项目中有效地使用它们。 首先,`jquery-ui.css`是jQuery UI的核心样式文件,它包含了所有组件的默认样式和主题。这个文件...
首先,jQuery Accordion是jQuery UI库的一部分,它提供了一种优雅的方式来展示内容,特别是当内容过多时。这种效果将多个区块堆叠在一起,每次只显示一个区块的内容,其余则保持折叠状态。通过点击标题,可以展开或...
在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的不同用法和配置,可以帮助开发者更好地理解和运用这个组件。通过学习这些示例,你可以掌握如何根据项目需求灵活定制...
- `jQuery_jQueryUI.chm`:这是jQuery UI的官方文档,提供了关于jQuery UI组件、主题和API的详细信息。 - `jquery-ui-1.8.18.custom.zip`:这是一个jQuery UI的定制版本,包含了jQuery UI的源代码和CSS、图片等资源...
**jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...
在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...
1. **组件(Widgets)**:jQuery UI的核心在于它的组件,这些组件是预先封装好的UI元素,如Accordion(手风琴)、Autocomplete(自动完成)、Button(按钮)、Calendar(日历,即日期选择器)、Dialog(对话框)、...
jQuery UI 是一个基于 jQuery JavaScript 库的开源框架,它提供了丰富的用户界面组件和交互效果,如拖放功能、对话框、日历、滑块、进度条等。这个库旨在简化网页开发,帮助开发者快速构建功能完备且用户体验良好的...
1. **jQuery UI组件**:jQuery UI 包含了多种组件,如日期选择器(Datepicker)、对话框(Dialog)、拖放功能(Draggable)、可排序列表(Sortable)和可折叠面板(Accordion)。这些组件极大地简化了网页的交互设计...
jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)和可折叠(Accordion)等。在这个项目中,jQuery UI被用来...
jQuery UI的核心是其组件系统,这些组件包括但不限于:`accordion`(手风琴)、`autocomplete`(自动完成)、`datepicker`(日期选择器)、`dialog`(对话框)、`draggable`(可拖动)、`droppable`(可放置)、`...
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
5. **布局(Layout)**:jQueryUI的Resizable和Accordion等功能可以帮助开发者创建灵活的布局结构,适应不同的屏幕尺寸和设备类型,从而实现响应式设计。 6. **兼容性**:jQueryUI V1.12.1与jQuery V1.12.4的搭配...
《jQuery UI组件集合详解》 jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集,它提供了丰富的交互效果和可自定义的主题,使得开发者能够更轻松地创建出美观、功能丰富的网页应用。这个组件集合涵盖了...
- **选择组件**:根据项目需求,选择要使用的jQuery UI组件,如Dialog(对话框)、Accordion(手风琴)、DatePicker(日期选择器)等。 - **初始化组件**:通过JavaScript代码初始化组件,设置相应的选项和事件监听...