JqueryUI - 標籤

標籤是一組邏輯上分組的內容，允許我們快速在它們之間切換。標籤允許我們像手風琴一樣節省空間。為了使標籤正常工作，需要使用以下標記集：

標籤必須位於有序列表（<ol>）或無序列表（<ul>）中。
每個標籤標題必須位於每個<li>內，並用具有href屬性的錨（<a>）標籤包裹。
每個標籤面板可以是任何有效的元素，但它必須具有一個id，該id對應於關聯標籤錨點中的雜湊值。

jQueryUI 為我們提供了 tabs() 方法，它極大地改變了頁面內 HTML 元素的外觀。此方法遍歷（在 jQuery UI 內部）HTML 程式碼，並向相關元素（此處為標籤）新增新的 CSS 類，以使其具有適當的樣式。

語法

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

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

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

tabs (options) 方法宣告 HTML 元素及其內容應作為標籤進行管理。options 引數是一個物件，用於指定標籤的外觀和行為。

語法

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

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

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

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


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

序號	選項和描述
1	active 此選項指定當前活動的標籤/面板。預設值為0。選項 - active 此選項指定當前活動的標籤/面板。預設值為0。這可以是以下型別：布林值 - 設定為false時，將摺疊所有面板。這需要collapsible選項為true。整數 - 活動（開啟）的面板的從零開始的索引。負值從最後一個面板向後選擇面板。語法 $( ".selector" ).tabs ( { active: 1 } );
2	collapsible 此選項設定為true時，允許取消選擇標籤。設定為 false（預設值）時，單擊選定的標籤不會取消選擇（它保持選中狀態）。預設值為false。選項 - collapsible 此選項設定為true時，允許取消選擇標籤。設定為 false（預設值）時，單擊選定的標籤不會取消選擇（它保持選中狀態）。預設值為false。語法 $( ".selector" ).tabs ( { collapsible: true } );
3	disabled 此選項使用陣列指示停用的索引標籤（因此無法選擇）。例如，使用 [0, 1] 停用前兩個標籤。預設值為false。選項 - disabled 此選項使用陣列指示停用的索引標籤（因此無法選擇）。例如，使用 [0, 1] 停用前兩個標籤。預設值為false。這可以是以下型別：布林值 - 啟用或停用所有標籤。陣列 - 包含應停用的標籤的從零開始的索引的陣列，例如，[ 0, 2 ] 將停用第一個和第三個標籤。語法 $( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );
4	event 此選項是事件的名稱，允許使用者選擇新標籤。例如，如果此選項設定為“mouseover”，則將滑鼠懸停在標籤上將選擇它。預設值為“click”。選項 - event 此選項是事件的名稱，允許使用者選擇新標籤。例如，如果此選項設定為“mouseover”，則將滑鼠懸停在標籤上將選擇它。預設值為“click”。語法 $( ".selector" ).tabs ( { event: "mouseover" } );
5	heightStyle 此選項控制標籤小部件和每個面板的高度。預設值為“content”。選項 - heightStyle 此選項控制標籤小部件和每個面板的高度。預設值為“content”。可能的值為： auto - 所有面板都將設定為最高面板的高度。 fill - 根據標籤的父級高度擴充套件到可用高度。 content - 每個面板的高度僅與其內容一樣高。語法 $( ".selector" ).tabs ( { heightStyle: "fill" } );
6	hide 此選項指定如何動畫隱藏面板。預設值為null。選項 - hide 此選項指定如何動畫隱藏面板。預設值為null。這可以是以下型別：布林值 - 設定為false時，將不使用動畫，並且面板將立即隱藏。數字 - 面板將以指定的持續時間和預設緩動淡出。字串 - 面板將使用指定的效果隱藏。值可以是slideUp或fold 物件 - 對於此型別，可以提供effect、delay、duration和easing屬性。語法 $( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );
7	show 此選項指定如何動畫顯示面板。預設值為null。選項 - show 此選項指定如何動畫顯示面板。預設值為null。這可以是以下型別：布林值 - 設定為false時，將不使用動畫，並且面板將立即顯示。數字 - 面板將以指定的持續時間和預設緩動淡出。字串 - 面板將使用指定的效果顯示。值可以是slideUp或fold。物件 - 對於此型別，可以提供effect、delay、duration和easing屬性。語法 $( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );

以下部分將向您展示一些標籤功能的工作示例。

預設功能

以下示例演示了標籤功能的簡單示例，未向tabs()方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <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 id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <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>

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

在以上示例中，單擊標籤以在內容之間切換。

使用 heightStyle、collapsible 和 hide

以下示例演示了在 JqueryUI 的 tabs 函式中使用三個選項(a) heightStyle (b) collapsible和(c) hide。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <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 id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <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>

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

單擊選定的標籤以切換其內容的關閉/開啟狀態。您還可以在標籤關閉時看到“slideUp”動畫效果。

事件的使用

以下示例演示了在 JqueryUI 的 tabs 函式中使用三個選項event。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <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 id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <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>

在以上示例中，使用滑鼠懸停在標籤上切換部分的開啟/關閉狀態。

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

tabs ("action", params) 方法允許對標籤執行操作（透過 JavaScript 程式），選擇、停用、新增或刪除標籤。操作在第一個引數中指定為字串（例如，要新增新標籤，則為“add”）。請查看下錶中可以傳遞的操作。

語法

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

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


$( ".selector" ).tabs("destroy");
$( ".selector" ).tabs("disable");
$( ".selector" ).tabs( "disable", 1 );
$( ".selector" ).tabs("enable");
$( ".selector" ).tabs( "enable", 1 );
$( ".selector" ).tabs("load", 1);
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
$( ".selector" ).tabs("option");
$( ".selector" ).tabs( "option", "disabled", true );
$( ".selector" ).tabs( "option", { disabled: true } );
$( ".selector" ).tabs( "refresh" );
var widget = $( ".selector" ).tabs( "widget" );

序號	操作和描述
1	destroy 此操作完全銷燬元素的標籤功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。操作 - destroy 此操作完全銷燬元素的標籤功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。語法 $( ".selector" ).tabs("destroy");
2	disable 此操作停用所有標籤。此方法不接受任何引數。操作 - disable 此操作停用所有標籤。此方法不接受任何引數。語法 $( ".selector" ).tabs("disable");
3	disable( index ) 此操作停用指定的標籤。其中index是要停用的標籤。操作 - disable( index ) 此操作停用指定的標籤。其中index是要停用的標籤。要一次停用多個標籤，請設定 disabled 選項：$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )。語法 $( ".selector" ).tabs( "disable", 1 );
4	enable 此操作啟用所有標籤。此簽名不接受任何引數。操作 - enable 此操作啟用所有標籤。此簽名不接受任何引數。語法 $( ".selector" ).tabs("enable");
5	enable( index ) 此操作啟用指定的標籤。其中index是要啟用的標籤。操作 - enable( index ) 此操作啟用指定的標籤。其中index是要啟用的標籤。要一次啟用多個標籤，請重置 disabled 屬性，例如：$( "#example" ).tabs( "option", "disabled", [] );。語法 $( ".selector" ).tabs( "enable", 1 );
6	load( index ) 此操作強制重新載入索引標籤，忽略快取。其中index是要載入的標籤。操作 - load( index ) 此操作強制重新載入索引標籤，忽略快取。其中index是要載入的標籤。語法 $( ".selector" ).tabs("load", 1);
7	option( optionName ) 此操作獲取當前與指定的optionName關聯的值。操作 - option( optionName ) 此操作獲取當前與指定的optionName關聯的值。語法 var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8	option 此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前標籤選項雜湊。操作 - option 此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前標籤選項雜湊。此方法不接受任何引數。語法 $( ".selector" ).tabs("option");
9	option( optionName, value ) 此操作設定與指定的optionName關聯的標籤選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。操作 - option( optionName, value ) 此操作設定與指定的optionName關聯的標籤選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。語法 $( ".selector" ).tabs( "option", "disabled", true );
10	option( options ) 此操作將一個或多個選項設定為標籤。操作 - option( options ) 此操作將一個或多個選項設定為標籤。語法 $( ".selector" ).tabs( "option", { disabled: true } );
11	refresh 此操作在直接在 DOM 中新增或刪除任何標籤時重新計算標籤面板的高度。結果取決於內容和heightStyle選項。操作 - refresh 此操作在直接在 DOM 中新增或刪除任何標籤時重新計算標籤面板的高度。結果取決於內容和heightStyle選項。語法 $( ".selector" ).tabs( "refresh" );
12	widget 此操作返回用作標籤小部件的元素，並用ui-tabs類名進行註釋。操作 - 小部件此操作返回用作標籤小部件的元素，並用ui-tabs類名進行註釋。語法 var widget = $( ".selector" ).tabs( "widget" );

使用 Action Disable()

現在讓我們看一個使用上面表格中操作的例子。以下示例演示了disable()方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <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 id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <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>

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

在這裡您可以看到所有選項卡都被停用了。

使用 Action Disable(index)

現在讓我們看一個使用上面表格中操作的例子。以下示例演示了disable(index)方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <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 id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <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>

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

在上面的例子中，您注意到選項卡 3 被停用了。

選項卡元素上的事件管理

除了我們在前面章節中看到的選項卡 (options) 方法之外，JqueryUI 還提供了事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：


$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   load: function( event, ui ) {}
});

序號	事件方法和描述
1	activate(event, ui) 選項卡被啟用後（動畫完成後）觸發此事件。事件 - activate(event, ui) 選項卡被啟用後（動畫完成後）觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： newTab - 剛剛啟用的選項卡。 oldTab - 剛剛停用的選項卡。 newPanel - 剛剛啟用的面板。 oldPanel - 剛剛停用的面板。語法 $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate(event, ui) 選項卡被啟用之前觸發此事件。事件 - beforeActivate(event, ui) 選項卡被啟用之前觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： newTab - 即將被啟用的選項卡。 oldTab - 即將被停用的選項卡。 newPanel - 即將被啟用的面板。 oldPanel - 即將被停用的面板。語法 $( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });
3	beforeLoad(event, ui) 當遠端選項卡即將載入時觸發此事件，在beforeActivate事件之後。此事件在 Ajax 請求發出之前觸發。事件 - beforeLoad(event, ui) 當遠端選項卡即將載入時觸發此事件，在beforeActivate事件之後。此事件在 Ajax 請求發出之前觸發。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 正在載入的選項卡。 panel - 將由 Ajax 響應填充的面板。 jqXHR - 請求內容的jqXHR物件。 ajaxSettings - jQuery.ajax將用於請求內容的設定。語法 $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	create(event, ui) 建立選項卡時觸發此事件。事件 - create(event, ui) 建立選項卡時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 活動選項卡。 panel - 活動面板。語法 $( ".selector" ).slider({ create: function( event, ui ) {} });
5	load(event, ui) 遠端選項卡載入完成後觸發此事件。事件 - load(event, ui) 遠端選項卡載入完成後觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 剛剛載入的選項卡。 panel - 剛剛由 Ajax 響應填充的面板。語法 $( ".selector" ).slider({ load: function( event, ui ) {} });

示例

以下示例演示了選項卡小部件中事件方法的使用。此示例演示了activate和create事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</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() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <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 id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <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><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

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

點選選項卡以檢視下方列印的訊息，這些訊息特定於事件。

列印頁面

序號	選項和描述
1	active 此選項指定當前活動的標籤/面板。預設值為0。選項 - active 此選項指定當前活動的標籤/面板。預設值為0。這可以是以下型別：布林值 - 設定為false時，將摺疊所有面板。這需要collapsible選項為true。整數 - 活動（開啟）的面板的從零開始的索引。負值從最後一個面板向後選擇面板。語法 $( ".selector" ).tabs ( { active: 1 } );
2	collapsible 此選項設定為true時，允許取消選擇標籤。設定為 false（預設值）時，單擊選定的標籤不會取消選擇（它保持選中狀態）。預設值為false。選項 - collapsible 此選項設定為true時，允許取消選擇標籤。設定為 false（預設值）時，單擊選定的標籤不會取消選擇（它保持選中狀態）。預設值為false。語法 $( ".selector" ).tabs ( { collapsible: true } );
3	disabled 此選項使用陣列指示停用的索引標籤（因此無法選擇）。例如，使用 [0, 1] 停用前兩個標籤。預設值為false。選項 - disabled 此選項使用陣列指示停用的索引標籤（因此無法選擇）。例如，使用 [0, 1] 停用前兩個標籤。預設值為false。這可以是以下型別：布林值 - 啟用或停用所有標籤。陣列 - 包含應停用的標籤的從零開始的索引的陣列，例如，[ 0, 2 ] 將停用第一個和第三個標籤。語法 $( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );
4	event 此選項是事件的名稱，允許使用者選擇新標籤。例如，如果此選項設定為“mouseover”，則將滑鼠懸停在標籤上將選擇它。預設值為“click”。選項 - event 此選項是事件的名稱，允許使用者選擇新標籤。例如，如果此選項設定為“mouseover”，則將滑鼠懸停在標籤上將選擇它。預設值為“click”。語法 $( ".selector" ).tabs ( { event: "mouseover" } );
5	heightStyle 此選項控制標籤小部件和每個面板的高度。預設值為“content”。選項 - heightStyle 此選項控制標籤小部件和每個面板的高度。預設值為“content”。可能的值為： auto - 所有面板都將設定為最高面板的高度。 fill - 根據標籤的父級高度擴充套件到可用高度。 content - 每個面板的高度僅與其內容一樣高。語法 $( ".selector" ).tabs ( { heightStyle: "fill" } );
6	hide 此選項指定如何動畫隱藏面板。預設值為null。選項 - hide 此選項指定如何動畫隱藏面板。預設值為null。這可以是以下型別：布林值 - 設定為false時，將不使用動畫，並且面板將立即隱藏。數字 - 面板將以指定的持續時間和預設緩動淡出。字串 - 面板將使用指定的效果隱藏。值可以是slideUp或fold 物件 - 對於此型別，可以提供effect、delay、duration和easing屬性。語法 $( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );
7	show 此選項指定如何動畫顯示面板。預設值為null。選項 - show 此選項指定如何動畫顯示面板。預設值為null。這可以是以下型別：布林值 - 設定為false時，將不使用動畫，並且面板將立即顯示。數字 - 面板將以指定的持續時間和預設緩動淡出。字串 - 面板將使用指定的效果顯示。值可以是slideUp或fold。物件 - 對於此型別，可以提供effect、delay、duration和easing屬性。語法 $( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );

序號	操作和描述
1	destroy 此操作完全銷燬元素的標籤功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。操作 - destroy 此操作完全銷燬元素的標籤功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。語法 $( ".selector" ).tabs("destroy");
2	disable 此操作停用所有標籤。此方法不接受任何引數。操作 - disable 此操作停用所有標籤。此方法不接受任何引數。語法 $( ".selector" ).tabs("disable");
3	disable( index ) 此操作停用指定的標籤。其中index是要停用的標籤。操作 - disable( index ) 此操作停用指定的標籤。其中index是要停用的標籤。要一次停用多個標籤，請設定 disabled 選項：$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )。語法 $( ".selector" ).tabs( "disable", 1 );
4	enable 此操作啟用所有標籤。此簽名不接受任何引數。操作 - enable 此操作啟用所有標籤。此簽名不接受任何引數。語法 $( ".selector" ).tabs("enable");
5	enable( index ) 此操作啟用指定的標籤。其中index是要啟用的標籤。操作 - enable( index ) 此操作啟用指定的標籤。其中index是要啟用的標籤。要一次啟用多個標籤，請重置 disabled 屬性，例如：$( "#example" ).tabs( "option", "disabled", [] );。語法 $( ".selector" ).tabs( "enable", 1 );
6	load( index ) 此操作強制重新載入索引標籤，忽略快取。其中index是要載入的標籤。操作 - load( index ) 此操作強制重新載入索引標籤，忽略快取。其中index是要載入的標籤。語法 $( ".selector" ).tabs("load", 1);
7	option( optionName ) 此操作獲取當前與指定的optionName關聯的值。操作 - option( optionName ) 此操作獲取當前與指定的optionName關聯的值。語法 var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8	option 此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前標籤選項雜湊。操作 - option 此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前標籤選項雜湊。此方法不接受任何引數。語法 $( ".selector" ).tabs("option");
9	option( optionName, value ) 此操作設定與指定的optionName關聯的標籤選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。操作 - option( optionName, value ) 此操作設定與指定的optionName關聯的標籤選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。語法 $( ".selector" ).tabs( "option", "disabled", true );
10	option( options ) 此操作將一個或多個選項設定為標籤。操作 - option( options ) 此操作將一個或多個選項設定為標籤。語法 $( ".selector" ).tabs( "option", { disabled: true } );
11	refresh 此操作在直接在 DOM 中新增或刪除任何標籤時重新計算標籤面板的高度。結果取決於內容和heightStyle選項。操作 - refresh 此操作在直接在 DOM 中新增或刪除任何標籤時重新計算標籤面板的高度。結果取決於內容和heightStyle選項。語法 $( ".selector" ).tabs( "refresh" );
12	widget 此操作返回用作標籤小部件的元素，並用ui-tabs類名進行註釋。操作 - 小部件此操作返回用作標籤小部件的元素，並用ui-tabs類名進行註釋。語法 var widget = $( ".selector" ).tabs( "widget" );

序號	事件方法和描述
1	activate(event, ui) 選項卡被啟用後（動畫完成後）觸發此事件。事件 - activate(event, ui) 選項卡被啟用後（動畫完成後）觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： newTab - 剛剛啟用的選項卡。 oldTab - 剛剛停用的選項卡。 newPanel - 剛剛啟用的面板。 oldPanel - 剛剛停用的面板。語法 $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate(event, ui) 選項卡被啟用之前觸發此事件。事件 - beforeActivate(event, ui) 選項卡被啟用之前觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： newTab - 即將被啟用的選項卡。 oldTab - 即將被停用的選項卡。 newPanel - 即將被啟用的面板。 oldPanel - 即將被停用的面板。語法 $( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });
3	beforeLoad(event, ui) 當遠端選項卡即將載入時觸發此事件，在beforeActivate事件之後。此事件在 Ajax 請求發出之前觸發。事件 - beforeLoad(event, ui) 當遠端選項卡即將載入時觸發此事件，在beforeActivate事件之後。此事件在 Ajax 請求發出之前觸發。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 正在載入的選項卡。 panel - 將由 Ajax 響應填充的面板。 jqXHR - 請求內容的jqXHR物件。 ajaxSettings - jQuery.ajax將用於請求內容的設定。語法 $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	create(event, ui) 建立選項卡時觸發此事件。事件 - create(event, ui) 建立選項卡時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 活動選項卡。 panel - 活動面板。語法 $( ".selector" ).slider({ create: function( event, ui ) {} });
5	load(event, ui) 遠端選項卡載入完成後觸發此事件。事件 - load(event, ui) 遠端選項卡載入完成後觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為： tab - 剛剛載入的選項卡。 panel - 剛剛由 Ajax 響應填充的面板。語法 $( ".selector" ).slider({ load: function( event, ui ) {} });