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 )

你可能感兴趣的:(jquery,UI,浏览器)