jQuery UI - 手風琴

上一頁
下一頁

jQuery UI 中的手風琴小部件是一個基於 jQuery 的可展開和摺疊的內容容器，它被分成多個部分，看起來可能像標籤頁。jQuery UI 提供了 accordion() 方法來實現這一點。

語法

accordion() 方法可以用兩種形式使用：

$(selector, context).accordion (options) 方法

accordion (options) 方法宣告一個 HTML 元素及其內容應被視為和管理為手風琴選單。options 引數是一個物件，用於指定所涉及選單的外觀和行為。

語法

$(selector, context).accordion (options);

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：

$(selector, context).accordion({option1: value1, option2: value2..... });

下表列出了可與此方法一起使用的不同options：

序號 選項和描述
1 active

指示頁面首次訪問時開啟的選單的索引。預設值為0，即第一個選單。

選項 - active

指示頁面首次訪問時開啟的選單的索引。預設值為0，即第一個選單。

可以是以下型別：

  • 布林值 - 如果設定為false，則將摺疊所有面板。這需要collapsible選項設定為true。

  • 整數 - 活動（開啟）的面板的基於零的索引。負值選擇從最後一個面板向後移動的面板。

語法

$( ".selector" ).accordion(
   { active: 2 }
);
2 animate

此選項用於設定如何為更改面板設定動畫。預設值為{}。

選項 - animate

此選項用於設定如何為更改面板設定動畫。預設值為{}。

可以是以下型別：

  • 布林值 - 值為false將停用動畫。

  • 數字 - 這是以毫秒為單位的持續時間。

  • 字串 - 要與預設持續時間一起使用的緩動名稱。

  • 物件 - 帶有緩動和持續時間屬性的動畫設定。

語法

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 collapsible

此選項設定為true時，允許使用者透過單擊來關閉選單。預設情況下，單擊開啟的面板標題不起作用。預設值為false。

選項 - collapsible

此選項設定為true時，允許使用者透過單擊來關閉選單。預設情況下，單擊開啟的面板標題不起作用。預設值為false。

語法

$( ".selector" ).accordion(
   { collapsible: true }
);
4 disabled

此選項設定為true時，將停用手風琴。預設值為false。

選項 - disabled

此選項設定為true時，將停用手風琴。預設值為false。

語法

$( ".selector" ).accordion(
   { disabled: true }
);
5 event

此選項指定用於選擇手風琴標題的事件。預設值為click。

選項 - event

此選項指定用於選擇手風琴標題的事件。預設值為click。

語法

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 header

此選項指定一個選擇器或元素來覆蓋識別標題元素的預設模式。預設值為> li > :first-child,> :not(li):even。

選項 - header

此選項指定一個選擇器或元素來覆蓋識別標題元素的預設模式。預設值為> li > :first-child,> :not(li):even。

語法

$( ".selector" ).accordion(
   { header: "h3" }
);
7 heightStyle

此選項用於控制手風琴和麵板的高度。預設值為auto。

選項 - heightStyle

此選項用於控制手風琴和麵板的高度。預設值為auto。

可能的值為：

  • auto - 所有面板都將設定為最高面板的高度。

  • fill - 根據手風琴父容器的高度展開到可用高度。

  • content - 每個面板的高度僅與其內容一樣高。

語法

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 icons

此選項是一個物件，用於定義要在開啟和關閉面板的標題文字左側使用的圖示。用於關閉面板的圖示指定為名為header的屬性，而用於打開面板的圖示指定為名為headerSelected的屬性。預設值為{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }。

選項 - icons

此選項是一個物件，用於定義要在開啟和關閉面板的標題文字左側使用的圖示。用於關閉面板的圖示指定為名為header的屬性，而用於打開面板的圖示指定為名為headerSelected的屬性。預設值為{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }。

語法

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

下一節將向您展示手風琴小部件功能的一些可執行示例。

預設功能

以下示例演示了手風琴小部件功能的簡單示例，未向accordion() 方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在一個名為accordionexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

單擊標題（選項卡 1、選項卡 2、選項卡 3）以展開/摺疊分成邏輯部分的內容，就像標籤頁一樣。

collapsible 的用法

以下示例演示了在 jQuery UI 的手風琴小部件中使用三個選項collapsible。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在一個名為accordionexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

在這裡，我們將 collapsible 設定為true。單擊手風琴標題，這允許摺疊活動部分。

heightStyle 的用法

以下示例演示了在 jQuery UI 的手風琴小部件中使用三個選項heightStyle。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在一個名為accordionexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

這裡我們有兩個手風琴，第一個手風琴的heightStyle選項設定為content，允許手風琴面板保持其原生高度。第二個手風琴的heightStyle選項設定為fill，指令碼將自動將手風琴的尺寸設定為其父容器的高度。

$(selector, context).accordion ("action", params) 方法

accordion ("action", params) 方法可以在手風琴元素上執行操作，例如選擇/取消選擇手風琴選單。操作在第一個引數中指定為字串（例如，“disable”停用所有選單）。查看下錶中可以傳遞的操作。

語法

$(selector, context).accordion ("action", params);;

下表列出了可與此方法一起使用的不同actions：

序號 操作和描述
1 destroy

此操作將完全銷燬元素的手風琴功能。元素將恢復到其初始化前的狀態。

操作 - destroy

此操作將完全銷燬元素的手風琴功能。元素將恢復到其初始化前的狀態。

語法

$(".selector").accordion("destroy");
2 disable

此操作停用所有選單。不會考慮任何點選。此方法不接受任何引數。

操作 - disable

此操作停用所有選單。不會考慮任何點選。此方法不接受任何引數。

語法

$(".selector").accordion("disable");
3 enable

此操作重新啟用所有選單。再次考慮點選。此方法不接受任何引數。

操作 - enable

此操作重新啟用所有選單。再次考慮點選。此方法不接受任何引數。

語法

$(".selector").accordion("enable");
4 option( optionName )

此操作獲取當前與指定的optionName關聯的手風琴元素的值。這需要一個字串值作為引數。

操作 - option( optionName )

此操作獲取當前與指定的optionName關聯的手風琴元素的值。這需要一個字串值作為引數。

語法

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 option

此操作獲取一個物件，其中包含表示當前手風琴選項雜湊的鍵/值對。

操作 - option

此操作獲取一個物件，其中包含表示當前手風琴選項雜湊的鍵/值對。

語法

var options = $( ".selector" ).accordion( "option" );
6 option( optionName, value )

此操作設定與指定的 optionName 關聯的手風琴選項的值。

操作 - option( optionName, value )

此操作設定與指定的 optionName 關聯的手風琴選項的值。

語法

$( ".selector" ).accordion( "option", "disabled", true );
7 option( options )

此操作設定手風琴的一個或多個選項。

操作 - option( options )

此操作設定手風琴的一個或多個選項。其中options是用於設定的選項-值對的對映。

語法

$( ".selector" ).accordion( "option", { disabled: true } );
8 refresh

此操作處理直接在 DOM 中新增或刪除的任何標題和麵板。然後重新計算手風琴面板的高度。結果取決於內容和 heightStyle 選項。此方法不接受任何引數。

操作 - refresh

此操作處理直接在 DOM 中新增或刪除的任何標題和麵板。然後重新計算手風琴面板的高度。結果取決於內容和 heightStyle 選項。此方法不接受任何引數。

語法

$(".selector").accordion("refresh");
9 widget

此操作返回手風琴小部件元素；用ui-accordion類名註釋的那個。

操作 - widget

此操作返回手風琴小部件元素；用ui-accordion類名註釋的那個。

語法

var widget = $( ".selector" ).accordion( "widget" );

示例

現在讓我們看看使用上表中操作的示例。以下示例演示了option( optionName, value ) 方法的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

讓我們將上述程式碼儲存在一個名為accordionexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

在這裡，我們演示了手風琴的啟用和停用。選擇相應的單選按鈕以檢查每個操作。

手風琴元素上的事件管理

除了我們在上一節中看到的 accordion (options) 方法外，jQuery UI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面：

序號 事件方法和描述
1 activate(event, ui)

當啟用選單時觸發此事件。此事件僅在面板啟用時觸發，在建立手風琴小部件時不會為初始面板觸發。

事件 - activate(event, ui)

當啟用選單時觸發此事件。此事件僅在面板啟用時觸發，在建立手風琴小部件時不會為初始面板觸發。其中event的型別為Event，ui的型別為Object。ui 的可能值為：

  • newHeader - 表示剛剛啟用的標題的 jQuery 物件。

  • oldHeader - 表示剛剛停用的標題的 jQuery 物件。

  • newPanel - 表示剛剛啟用的面板的 jQuery 物件。

  • oldPanel - 表示剛剛停用的面板的 jQuery 物件。

語法

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate(event, ui)

在啟用面板之前觸發此事件。可以取消此事件以阻止面板啟用。

事件 - beforeActivate(event, ui)

在啟用面板之前觸發此事件。可以取消此事件以阻止面板啟用。其中event的型別為Event，ui的型別為Object。ui 的可能值為：

  • newHeader - 表示即將啟用的標題的 jQuery 物件。

  • oldHeader - 表示即將停用的標題的 jQuery 物件。

  • newPanel - 表示即將啟用的面板的 jQuery 物件。

  • oldPanel - 表示即將停用的面板的 jQuery 物件。

語法

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 create(event, ui)

建立手風琴時觸發此事件。

事件 - create(event, ui)

建立手風琴時觸發此事件。其中event的型別為Event，ui的型別為Object。ui 的可能值為：

  • header - 表示活動標題的 jQuery 物件。

  • panel - 表示活動面板的 jQuery 物件。

語法

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

示例

以下示例演示了手風琴小部件中的事件方法用法。此示例演示了事件create、beforeActive和active的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

讓我們將上述程式碼儲存在一個名為accordionexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

我們根據事件在底部顯示文字。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.