jquery ui accordion的详细参数

简介: 1.1 active   这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。初始化设置例:$('#accordion').accordion({ active: 2 }); 在初始化之后的获取和设置例: //获取 var active = $('#accordion').
1.1 active
  这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。初始化设置例:$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例:
//获取 var active = $('#accordion').accordion('option', 'active');//设置 $('#accordion').accordion('option', 'active', 2);
注:设置小于0,默认第一个,大于总数,默认关闭;需要 collapsible: true. $("#doctor_acc").accordion( "option", "collapsible", true );

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 )
目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1326 0
|
5月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
38 4
|
1月前
|
JavaScript API 容器
jQuery Accordion
jQuery Accordion
15 4
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
695 1
|
12月前
|
JavaScript
jQuery带参跳转新页面,新页面获取url多个参数的办法
jQuery带参跳转新页面,新页面获取url多个参数的办法
47 0
|
12月前
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
50 0
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
146 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
362 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
241 0
下一篇
无影云桌面