jQuery UI Accordion Widget

By:
On:
In: JavaScript, jQuery UI, Widgets
Tagged: , , , , , ,

这个Accordion单字还满难的，Google的字典会给你翻成手风琴，啥米？不是在讲jQuery UI的特效吗？这个翻译真奇怪，

在维基里你可以看到手风琴的长相，在英文的维基中还有一个关于GUI的Accordion的解释，这个就比较像是ㄚ琪今天要测试使用的效果了，不过虽然字典没有解释，还是可以Google到有人翻成可折叠的特效，看一下手风琴的图示，你可能可以意会到吧，ㄚ琪也真佩服做这个特效的人，把它命名成Accordion。

[adsense]

先来测试一下预设的功能，范例页网址在http://jqueryui.com/demos/accordion/default.html

你可以将滑鼠移到标题的上方，看有什么效果，之后再点击看看！

它的程式码如下：

<script type="text/javascript"> $(function() { $("#accordion").accordion(); }); </script> <div class="demo"> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3><a href="#">Section 2</a></h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3><a href="#">Section 3</a></h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3><a href="#">Section 4</a></h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p> Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. </p> <p> The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript. </p> </div><!-- End demo-description -->

概览：

要作到这样的效果，语义的要求如下：

你的Accordion容器的标记需要成对的标题跟内容面板：

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

假如你要使用不同的元素来做标题，你要使用适合的选择器来指定标题的选项，例如：header: ‘a.header’，内容的元素一定在标题的后面。

假如你要在标题内有连结，并且使用a的元素作为标题，要新增一个class到里面并使用它作为标题，例如：header: ‘a.header’。

注意：假如你要一次开启多个标题，请不要使用Accordion。

accordion不允许同时开启很多面板，因为它需要更多努力才能做，假如你要找容器可以开启多个面板，不要使用这个效果，通常这个效果只要几行的jQuery程式码就可以使用：

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});

或是动画版

 

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});

选项：

  • disabled
    型别：Boolean
    预设值：false

    关闭 (true) 或启用 (false) accordion，在初始化（第一次建构）时设定accordion。

    程式码范例
    使用disabled选项来初始化accordion。
    $( ".selector" ).accordion({ disabled: true });
    在初始化后取得或设定disabled选项。
    //取得 var disabled = $( ".selector" ).accordion( "option", "disabled" ); //设定 $( ".selector" ).accordion( "option", "disabled", true );
  • active
    型别：Selector, Element, jQuery, Boolean, Number
    预设值：first child

    启用的元素选择器，在开始时可以设false不显示，需要collapsible: true。

    程式码范例
    使用active选项来初始化accordion。
    $( ".selector" ).accordion({ active: 2 });
    初始化后的取得或设定active选项。
    //取得 var active = $( ".selector" ).accordion( "option", "active" ); //设定 $( ".selector" ).accordion( "option", "active", 2 );
  • animated
    型别：Boolean, String
    预设值：’slide’

    选择你最喜欢的动画方式，或关闭(设成false)， 除了预设值外，’bounceslide’ 跟所有定义的缓解方法都有支援(‘bounceslide’ 需要UI Effects Core)。

    程式码范例
    使用animated选项来初始化accordion。
    $( ".selector" ).accordion({ animated: 'bounceslide' });
    初始化后取得或设定animated选项。
    //取得 var animated = $( ".selector" ).accordion( "option", "animated" ); //设定 $( ".selector" ).accordion( "option", "animated", 'bounceslide' );
  • autoHeight
    型别：Boolean
    预设值：true

    假如设定，最高的内容部份会被所有其他的部份来参考，提供更多一致性的动画效果。

    程式码范例
    使用autoHeight选项来初始化accordion。
    $( ".selector" ).accordion({ autoHeight: false });
    初始化后取得或设定autoHeight选项。
    //取得 var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" ); //设定 $( ".selector" ).accordion( "option", "autoHeight", false );
  • clearStyle
    型别：Boolean
    预设值：false

    假如设定，会在完成动画后清除高度跟溢出样式，这使得accordions可以跟动态内容一起使用，不一起使用则用autoHeight。

    程式码范例
    使用clearStyle选项来初始化accordion。
    $( ".selector" ).accordion({ clearStyle: true });
    初始化后取得或设定clearStyle选项。
    //取得 var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" ); //设定 $( ".selector" ).accordion( "option", "clearStyle", true );
  • collapsible
    型别：Boolean
    预设值：false

    是否所有的部份可以一次关闭，藉着触发事件（点击是预设的）来允许折叠的启用部份。

    程式码范例
    使用collapsible选项来初始化accordion。
    $( ".selector" ).accordion({ collapsible: true });
    初始化后取得或设定collapsible选项。
    //取得 var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); //设定 $( ".selector" ).accordion( "option", "collapsible", true );
  • event
    型别：String
    预设值：’click’

    触发accordion的事件。

    程式码范例
    使用event选项来初始化accordion。
    $( ".selector" ).accordion({ event: 'mouseover' });
    初始化后取得或设定event选项。
    //取得 var event = $( ".selector" ).accordion( "option", "event" ); //设定 $( ".selector" ).accordion( "option", "event", 'mouseover' );
  • fillSpace
    型别：Boolean
    预设值：false

    假如有设定，accordion会完全填满父元素的高度，复写autoheight。

    程式码范例
    使用指定的fillSpace选项来初始化accordion。
    $( ".selector" ).accordion({ fillSpace: true });
    初始化后取得或设定fillSpace选项。
    //取得 var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" ); //设定 $( ".selector" ).accordion( "option", "fillSpace", true );
  • header
    型别：Selector, jQuery
    预设值：’> li > :first-child,> :not(li):even’

    标头元素的选择器。

    程式码范例
    使用指定的header选项来初始化accordion。
    $( ".selector" ).accordion({ header: 'h3' });
    初始化后取得或设定header选项。
    //取得 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’ }

    标头使用的图示，图示可以用’header’跟’headerSelected’来指定，而我们建议使用jQuery UI ThemeRoller处理的jQuery UI CSS架构的原生图示。

    程式码范例

    使用指定的icons选项来初始化accordion。
    $( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
    初始化后取得或设定icons选项。
    //取得 var icons = $( ".selector" ).accordion( "option", "icons" ); //设定 $( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );
  • navigation
    型别：Boolean
    预设值：false

    假如设定，会寻找location.href匹配的锚点然后启用它，伟大的href基础的状态储存，使用navigationFilter来实作你自己的matcher。

    程式范例
    • 初始化有指定navigation选项的accordion。
    • $( ".selector" ).accordion({ navigation: true });
    • 初始化后取得或设定navigation选项。
    • //getter var navigation = $( ".selector" ).accordion( "option", "navigation" ); //setter $( ".selector" ).accordion( "option", "navigation", true );
    • navigationFilter
    型别：Function
    预设值：

    复写预设的location.href-比对为你自己的。

    程式范例
    初始化有指定navigationFilter选项的accordion。
    $( ".selector" ).accordion({ navigationFilter: function(){ ... } });
    初始化后取得或设定 navigationFilter选项。
    //getter var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" ); //setter $( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );

    事件：

  • change
    型别：accordionchange

    这个事件会在accordion每一次改变的时候触发，假如accordion驱动，一旦动画完成事件就会被触发；否则，它会立即触发。

    $('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});
    程式码范例
    提供一个回呼函式来处理change事件作为init选项。
    $( ".selector" ).accordion({ change: function(event, ui) { ... } });
    系结change事件的型别：accordionchange。
    $( ".selector" ).bind( "accordionchange", function(event, ui) { ... });
    • changestart
      型别：accordionchangestart

      这个事件会在accordion每一次开始改变时被触发。

      $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});
      程式码范例
      提供一个回呼函式来处理changestart事件作为init选项。
      $( ".selector" ).accordion({ changestart: function(event, ui) { ... } });
      系结changestart事件的型别：accordionchangestart。
      $( ".selector" ).bind( "accordionchangestart", function(event, ui) { ... });

      方法：

  • destroy
    .accordion( “destroy” )

    完整移除accordion功能，传回元素它的预先初始化状态。

  • disable
    .accordion( “disable” )

    关闭accordion。

  • enable

    .accordion( “enable” )

    启用accordion。

  • option
    .accordion( “option” , optionName , [value] )

    取得或设定accordion选项，假如没有指定值，就会用getter来处理。

  • option
    .accordion( “option” , options )

    藉由提供一个选项物件来一次设定多重accordion选项。

  • widget
    .accordion( “widget” )

    传回.ui-accordion元素。

  • activate

    .accordion( “activate” , index )

    以程式化的方式启用Accordion的内容部份，index可以是零索引的数字来比对表头的位置来关闭或是一个选择器来比对一个元素，传递false来关闭所有(唯一可能的就是collapsible:true).

  • resize
    .accordion( “resize” )

    在使用fillSpace选项以及容器的高度改变时重新计算accordion内容的高度，例如，当容器改变大小时，这个方法应该会由它的resize-event.呼叫。

  • 主题化：

jQuery UI Accordion外挂使用jQuery UI CSS架构来设计它的外观和感觉的样式，包括颜色和背景材质，我们建议使用ThemeRoller工具来建构跟下载自订的主题以便容易建构和维护。

假如有需要更高深的自订，在jquery.ui.accordion.css样式表可以参考指定元件的类别来修改，这些类别在下面用粗体字加强显示。

Sample markup with jQuery UI CSS Framework classes

<div class=”ui-accordion ui-widget ui-helper-reset”>

<h3 class=”ui-accordion-header ui-helper-reset ui-state-active ui-corner-top”>

<span class=”ui-icon ui-icon-triangle-1-s”/>

<a href=”#”>Section 1</a>

</h3>

<div class=”ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active“>

Section 1 content

</div>

<h3 class=”ui-accordion-header ui-helper-reset ui-state-default ui-corner-all”>

<span class=”ui-icon ui-icon-triangle-1-e”/>

<a href=”#”>Section 2</a>

</h3>

<div class=”ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom”>

Section 2 content

</div>

<h3 class=”ui-accordion-header ui-helper-reset ui-state-default ui-corner-all”>

<span class=”ui-icon ui-icon-triangle-1-e”/>

<a href=”#”>Section 3</a>

</h3>

<div class=”ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom”>

Section 3 content

</div>

</div>

注意：这一个标签的范例是由accordion外挂产生的，不是用标签来建置accordion，唯一需要的标签是

<div>

<h3><a href=”#”>Section 1</a></h3>

<div>

Section 1 content

</div>

<h3><a href=”#”>Section 2</a></h3>

<div>

Section 2 content

</div>

<h3><a href=”#”>Section 3</a></h3>

<div>

Section 3 content

</div>

</div>.

Comments are closed.