JQuery UI - Accordion

·概述 手风筝插件。点击头部，展开、折叠对应的内容元素，有点类似于tabs插件。此插件同一时间内只允许展开一个内容页。 官方示例地址：http://jqueryui.com/demos/accordion/ HTML标记： 在手风筝插件中，头部与内容必须成对出现。如： <div id="accordion"> <a href="#" mce_href="#">First header</a> <div>First content</div> <a href="#" mce_href="#">Second header</a> <div>Second content</div> </div> 所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.newHeader - 被激活标签的头部，JQuery对象 ui.oldHeader - 上一个标签的头部，JQuery对象 ui.newContent - 被激活标签的内容，JQuery对象 ui.oldContent - 上一个标签的内容，JQuery对象 ·参数（参数名 : 参数类型 : 默认值） active : Selector, Element, jQuery, Boolean, Number : first child 设置页面加载完成后显示第几个标签页内容，如果为false，则不展开任何标签内容。 初始：$('.selector').accordion({ active: 2 }); 获取：var active = $('.selector').accordion('option', 'active'); 设置：$('.selector').accordion('option', 'active', 2); animated : Boolean, String : 'slide' 选择要使用哪种动画效果展开/折叠菜单，其它效果需要Effects库的支持。 初始：$('.selector').accordion({ animated: 'bounceslide' }); 获取：var animated = $('.selector').accordion('option', 'animated'); 设置：$('.selector').accordion('option', 'animated', 'bounceslide'); autoHeight : Boolean : true 如果设置为true，页面其它部分中最高的一部分的高度将做为插件的高度。 初始：$('.selector').accordion({ autoHeight: false }); 获取：var autoHeight = $('.selector').accordion('option', 'autoHeight'); 设置：$('.selector').accordion('option', 'autoHeight', false); clearStyle : Boolean : false 如果设置为true，在执行完动画效果后，将移除height和overflow样式，这使得手风筝插件可以在动态内容的情况下工作。此属性不能与autoHeight同时使用。 初始：$('.selector').accordion({ clearStyle: true }); 获取：var clearStyle = $('.selector').accordion('option', 'clearStyle'); 设置：$('.selector').accordion('option', 'clearStyle', true); collapsible : Boolean : false 允许使用鼠标事件触发标签页的展开/折叠。（默认为click） 初始：$('.selector').accordion({ collapsible: true }); 获取：var collapsible = $('.selector').accordion('option', 'collapsible'); 设置：$('.selector').accordion('option', 'collapsible', true); event : String : 'click' 设置哪种鼠标事件触发标签页展开/折叠。 初始：$('.selector').accordion({ event: 'mouseover' }); 获取：var event = $('.selector').accordion('option', 'event'); 设置：$('.selector').accordion('option', 'event', 'mouseover'); fillSpace : Boolean : false 如果设置为true，则手风筝插件填充满父窗口的高度。（此属性将覆盖autoHeight属性） 初始：$('.selector').accordion({ fillSpace: true }); 获取：var fillSpace = $('.selector').accordion('option', 'fillSpace'); 设置：$('.selector').accordion('option', 'fillSpace', true); header : Selector, jQuery : '> li > :first-child,> :not(li):even' 设置手风筝插件以哪一元素作为其头部。 初始：$('.selector').accordion({ header: 'h3' }); 获取：var header = $('.selector').accordion('option', 'header'); 设置：$('.selector').accordion('option', 'header', 'h3'); icons : Object : { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' } 设置标签头部展开、折叠时的图标，参考默认值。 初始：$('.selector').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } }); 获取：var icons = $('.selector').accordion('option', 'icons'); 设置：$('.selector').accordion('option', 'icons', { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }); navigation : Boolean : false 如果设置为true，则寻找匹配的location.href，并激活它。可使用navigationFilter属性实现自定义匹配。 初始：$('.selector').accordion({ navigation: true }); 获取：var navigation = $('.selector').accordion('option', 'navigation'); 设置：$('.selector').accordion('option', 'navigation', true); navigationFilter : Function : void(0) 重写默认的location.href，实现自定义匹配。 初始：$('.selector').accordion({ navigationFilter: function(){ ... } }); 获取：var navigationFilter = $('.selector').accordion('option', 'navigationFilter'); 设置：$('.selector').accordion('option', 'navigationFilter', function(){ ... }); ·事件 change 当手风筝菜单发生改变时触发此事件。如果有设置动画效果，则该事件同时进行。 初始：$('.selector').accordion({ change: function(event, ui) { ... } }); 绑定：$('.selector').bind('accordionchange', function(event, ui) { ... }); changestart 当手风筝菜单开始发生变化时触发此事件。 初始：$('.selector').accordion({ changestart: function(event, ui) { ... } }); 绑定：$('.selector').bind('accordionchangestart', function(event, ui) { ... }); ·方法 destory 从元素中移除拖拽功能。 用法：.accordion( 'destroy' ) disable 禁用元素的拖拽功能。 用法：.accordion( 'disable' ) enable 启用元素的拖拽功能。 用法：.accordion( 'enable' ) option 获取或设置元素的参数。 用法：.accordion( 'option' , optionName , [value] ) activate 激活指定索引的标签内容页。如果设置为false，则当collapsible:true时，关闭所有标签。 用法：.accordion( 'activate' , index )