jQuery UI Accordion Widget

By:
On: ,Modified:
In: JavaScript, jQuery UI, Widgets
Tagged: , , , , , , ,
With: 2 Comments
點閱人數：12,410次

這個Accordion單字還滿難的，Google的字典會給你翻成手風琴，啥米？不是在講jQuery UI的特效嗎？這個翻譯真奇怪，

在維基裡你可以看到手風琴的長相，在英文的維基中還有一個關於GUI的Accordion的解釋，這個就比較像是ㄚ琪今天要測試使用的效果了，不過雖然字典沒有解釋，還是可以Google到有人翻成可折疊的特效，看一下手風琴的圖示，你可能可以意會到吧，ㄚ琪也真佩服做這個特效的人，把它命名成Accordion。

先來測試一下預設的jquery ui accordion功能，範例頁網址在http://jqueryui.com/demos/accordion/default.html

你可以將滑鼠移到標題的上方，看有什麼效果，之後再點擊看看！

它的程式碼如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</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>Section 2</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>Section 3</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>Section 4</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>
 
 
</body>
</html>

 

概覽：

要作到這樣的效果，語義的要求如下：

你的Accordion容器的標記需要成對的標題跟內容面板：

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</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>.

※jQuery UI的對話框
※jQuery UI入門
※用G Suite協作平台Google Sites打造專業的賺錢網站在家工作

 

感謝你看到這裡，很快就可以離開了，但最好的獎勵行動就是按一下幫我分享或留言，感恩喔～

點我分享到Facebook

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *