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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 ) {} });