JqueryUI - Tabs

选项卡是一组逻辑分组的内容，允许我们在它们之间快速切换。标签允许我们像手风琴一样节省空间。要使标签正常工作，需要使用一组标记 -

选项卡必须位于已排序（
每个标签标题必须位于每个
中，并由具有href属性的anchor（<a>）标记包装。
每个选项卡面板可以是任何有效元素，但它必须具有id ，该id对应于关联选项卡的锚点中的哈希。

jQueryUI为我们提供了tabs（）方法，彻底改变了页面内HTML元素的外观。此方法遍历（在jQuery UI内部）HTML代码，并向相关元素（此处为选项卡）添加新的CSS类，以便为它们提供适当的样式。

语法 (Syntax)

tabs ()方法可以使用两种形式 -

$ (selector, context).tabs（选项）方法

tabs (options)方法声明应将HTML元素及其内容作为选项卡进行管理。 options参数是一个指定选项卡外观和行为的对象。

语法 (Syntax)

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

您可以使用JavaScript对象一次提供一个或多个选项。如果要提供多个选项，则您将使用逗号分隔它们，如下所示 -

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

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


$( ".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 } }
);

Sr.No.	选项和说明
1	active 此选项指定当前活动的选项卡/面板。默认情况下，其值为0 。 Option - active 此选项指定当前活动的选项卡/面板。默认情况下，其值为0 。这可以是 - Boolean - 设置为false ，将折叠所有面板。这要求collapsible选项为true 。 Integer - 面板的从零开始的索引处于活动状态（打开）。负值选择从最后一个面板向后移动的面板。 Syntax `$( ".selector" ).tabs ( { active: 1 } );`
2	collapsible 此选项设置为true ，它允许取消选择选项卡。设置为false（默认值）时，单击选定的选项卡不会取消选择（它保持选中状态）。默认情况下，其值为false 。 Option - collapsible 此选项设置为true ，它允许取消选择选项卡。设置为false（默认值）时，单击选定的选项卡不会取消选择（它保持选中状态）。默认情况下，其值为false 。 Syntax `$( ".selector" ).tabs ( { collapsible: true } );`
3	disabled 此选项使用数组来指示已禁用的索引选项卡（因此无法选择）。例如，使用[0,1]禁用前两个选项卡。默认情况下，其值为false 。 Option - disabled 此选项使用数组来指示已禁用的索引选项卡（因此无法选择）。例如，使用[0,1]禁用前两个选项卡。默认情况下，其值为false 。这可以是 - Boolean - 启用或禁用所有选项卡。 Array - 包含应禁用的选项卡的从零开始的索引的数组，例如[0,2]将禁用第一个和第三个选项卡。 Syntax `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	event 此选项是允许用户选择新选项卡的事件名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为"click" 。 Option - event 此选项是允许用户选择新选项卡的事件名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为"click" 。 Syntax `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	heightStyle 此选项控制选项卡窗口小部件和每个面板的高度。默认情况下，其值为"content" 。 Option - heightStyle 此选项控制选项卡窗口小部件和每个面板的高度。默认情况下，其值为"content" 。可能的值是 - auto - 所有面板将设置为最高面板的高度。 fill - 根据选项卡的父高度扩展到可用高度。 content - 每个面板仅与其内容一样高。 Syntax `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	hide 此选项指定如何为面板隐藏设置动画。默认情况下，其值为null 。 Option - hide 此选项指定如何为面板隐藏设置动画。默认情况下，其值为null 。这可以是 - Boolean - 设置为false ，不使用任何动画，面板将立即隐藏。 Number - 面板将以指定的持续时间和默认缓动淡出。 String - 将使用指定的效果隐藏面板。值可以是slideUp或fold Object - 对于此类型，可以提供属性effect ， delay ， duration easing 。 Syntax `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
7	show 此选项指定如何动画显示面板。默认情况下，其值为null 。 Option - show 此选项指定如何动画显示面板。默认情况下，其值为null 。这可以是 - Boolean - 设置为false ，不使用任何动画，面板将立即显示。 Number - 面板将以指定的持续时间和默认缓动淡出。 String - 将使用指定的效果显示面板。值可以是slideUp或fold 。 Object - 对于此类型，可以提供属性effect ， delay ， duration easing 。 Syntax `$( ".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>

让我们将上面的代码保存在HTML文件tabsexample.htm ，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。现在，你可以玩结果 -

新页面打开

在上面的示例中，单击选项卡以在内容之间交换。

使用heightStyle，可折叠和隐藏

下面的示例演示了三个选项的用法(a) heightStyle (b) collapsible ，以及(c) hide在JqueryUI的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-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>

让我们将上述代码保存在HTML文件tabsexample.htm ，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果 -

新页面打开

单击选定的选项卡以切换其内容已关闭/打开。选项卡关闭时，您还可以看到动画效果“slideUp”。

使用事件

以下示例演示了JqueryUI的tabs函数中三个options 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>

让我们将上述代码保存在HTML文件tabsexample.htm ，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果 -

新页面打开

在上面的示例中，使用鼠标悬停选项卡切换打开/关闭的部分。

$ (selector, context).tabs（“action”，params）方法

tabs ("action", params)方法允许在选项卡上执行操作（通过JavaScript程序），选择，禁用，添加或删除选项卡。该操作在第一个参数中指定为字符串（例如，“添加”以添加新选项卡）。请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -


$( ".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" );

Sr.No.	行动和描述
1	destroy 此操作会完全破坏元素的选项卡功能。元素返回到pre-init状态。此方法不接受任何参数。 Action - destroy 此操作会完全破坏元素的选项卡功能。元素返回到pre-init状态。此方法不接受任何参数。 Syntax `$( ".selector" ).tabs("destroy");`
2	disable 此操作会禁用所有选项卡。此方法不接受任何参数。 Action - disable 此操作会禁用所有选项卡。此方法不接受任何参数。 Syntax `$( ".selector" ).tabs("disable");`
3	disable( index ) 此操作将禁用指定的选项卡。其中index是要禁用的选项卡。 Action - disable( index ) 此操作将禁用指定的选项卡。其中index是要禁用的选项卡。要一次禁用多个选项卡，请设置禁用选项:$（“＃tabs”）。tabs（“option”，“disabled”，[1,2,3]）。 Syntax `$( ".selector" ).tabs( "disable", 1 );`
4	enable 此操作会激活所有选项卡。此签名不接受任何参数。 Action - enable 此操作会激活所有选项卡。此签名不接受任何参数。 Syntax `$( ".selector" ).tabs("enable");`
5	enable( index ) 此操作会激活指定的选项卡。其中index是要启用的选项卡。 Action - enable( index ) 此操作会激活指定的选项卡。其中index是要启用的选项卡。要一次启用多个选项卡，请重置禁用的属性，如:$（“＃example”）。tabs（“option”，“disabled”，[]）;. Syntax `$( ".selector" ).tabs( "enable", 1 );`
6	load( index ) 此操作会强制重新加载索引选项卡，忽略缓存。其中index是要加载的选项卡。 Action - load( index ) 此操作会强制重新加载索引选项卡，忽略缓存。其中index是要加载的选项卡。 Syntax `$( ".selector" ).tabs("load", 1);`
7	option( optionName ) 此操作获取当前与指定的optionName关联的值。 Action - option( optionName ) 此操作获取当前与指定的optionName关联的值。 Syntax `var isDisabled = $( ".selector" ).tabs( "option", "disabled" );`
8	option 此操作获取一个对象，该对象包含表示当前选项卡选项哈希的键/值对。 Action - option 此操作获取一个对象，该对象包含表示当前选项卡选项哈希的键/值对。此方法不接受任何参数。 Syntax `$( ".selector" ).tabs("option");`
9	option( optionName, value ) 此操作设置与指定的optionName关联的tabs选项的值。参数optionName是要设置的选项的名称， value是要为该选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的tabs选项的值。参数optionName是要设置的选项的名称， value是要为该选项设置的值。 Syntax `$( ".selector" ).tabs( "option", "disabled", true );`
10	option( options ) 此操作为选项卡设置一个或多个选项。 Action - option( options ) 此操作为选项卡设置一个或多个选项。 Syntax `$( ".selector" ).tabs( "option", { disabled: true } );`
11	refresh 当在DOM中直接添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和heightStyle选项。 Action - refresh 当在DOM中直接添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和heightStyle选项。 Syntax `$( ".selector" ).tabs( "refresh" );`
12	widget 此操作返回用作选项卡窗口小部件的元素，使用ui-tabs类名称进行批注。 Action - widget 此操作返回用作选项卡窗口小部件的元素，使用ui-tabs类名称进行批注。 Syntax `var widget = $( ".selector" ).tabs( "widget" );`

Use of 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的标准浏览器中打开它，你还必须看到以下输出 -

新页面打开

在这里，您可以看到所有选项卡都被禁用。

Use of 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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

在上面的示例中，您注意到Tab 3已禁用。

标签元素的事件管理

除了我们在前面几节中看到的tabs（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 ) {}
});

Sr.No.	事件方法和描述
1	activate(event, ui) 激活选项卡后（动画完成后）将触发此事件。 Event - activate(event, ui) 激活选项卡后（动画完成后）将触发此事件。其中event是Event类型， ui是Object类型。 ui可能值是 - newTab - 刚刚激活的选项卡。 oldTab - 刚刚停用的选项卡。 newPanel - 刚刚激活的面板。 oldPanel - 刚刚停用的面板。 Syntax `$( ".selector" ).slider({ activate: function( event, ui ) {} });`
2	beforeActivate(event, ui) 在激活选项卡之前触发此事件。 Event - beforeActivate(event, ui) 在激活选项卡之前触发此事件。其中event是Event类型， ui是Object类型。 ui可能值是 - newTab - 即将激活的选项卡。 oldTab - 即将停用的选项卡。 newPanel - 该面板即将被激活。 oldPanel - 面板即将停用。 Syntax `$( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });`
3	beforeLoad(event, ui) 在beforeActivate事件之后，即将加载远程选项卡时会触发此事件。在发出Ajax请求之前触发此事件。 Event - beforeLoad(event, ui) 在beforeActivate事件之后，即将加载远程选项卡时会触发此事件。在发出Ajax请求之前触发此事件。其中event是Event类型， ui是Object类型。 ui可能值是 - tab - 正在加载的选项卡。 panel - 将由Ajax响应填充的面板。 jqXHR - 请求内容的jqXHR对象。 ajaxSettings - jQuery.ajax用于请求内容的设置。 Syntax `$( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });`
4	create(event, ui) 创建选项卡时会触发此事件。 Event - create(event, ui) 创建选项卡时会触发此事件。其中event是Event类型， ui是Object类型。 ui可能值是 - tab - 活动选项卡。 panel - 活动面板。 Syntax `$( ".selector" ).slider({ create: function( event, ui ) {} });`
5	load(event, ui) 加载远程选项卡后会触发此事件。 Event - load(event, ui) 加载远程选项卡后会触发此事件。其中event是Event类型， ui是Object类型。 ui可能值是 - tab - 刚刚加载的选项卡。 panel - 刚刚由Ajax响应填充的面板。 Syntax `$( ".selector" ).slider({ load: function( event, ui ) {} });`

例子 (Example)

以下示例演示了标签窗口小部件中的事件方法用法。此示例演示了使用事件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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

单击选项卡以查看特定于事件的下面打印的消息。

<上一篇.JqueryUI - Spinner( Spinner)

JqueryUI - 工具提示( Tooltip).下一篇>

Sr.No.	选项和说明
1	active 此选项指定当前活动的选项卡/面板。默认情况下，其值为0 。 Option - active 此选项指定当前活动的选项卡/面板。默认情况下，其值为0 。这可以是 - Boolean - 设置为false ，将折叠所有面板。这要求collapsible选项为true 。 Integer - 面板的从零开始的索引处于活动状态（打开）。负值选择从最后一个面板向后移动的面板。 Syntax `$( ".selector" ).tabs ( { active: 1 } );`
2	collapsible 此选项设置为true ，它允许取消选择选项卡。设置为false（默认值）时，单击选定的选项卡不会取消选择（它保持选中状态）。默认情况下，其值为false 。 Option - collapsible 此选项设置为true ，它允许取消选择选项卡。设置为false（默认值）时，单击选定的选项卡不会取消选择（它保持选中状态）。默认情况下，其值为false 。 Syntax `$( ".selector" ).tabs ( { collapsible: true } );`
3	disabled 此选项使用数组来指示已禁用的索引选项卡（因此无法选择）。例如，使用[0,1]禁用前两个选项卡。默认情况下，其值为false 。 Option - disabled 此选项使用数组来指示已禁用的索引选项卡（因此无法选择）。例如，使用[0,1]禁用前两个选项卡。默认情况下，其值为false 。这可以是 - Boolean - 启用或禁用所有选项卡。 Array - 包含应禁用的选项卡的从零开始的索引的数组，例如[0,2]将禁用第一个和第三个选项卡。 Syntax `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	event 此选项是允许用户选择新选项卡的事件名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为"click" 。 Option - event 此选项是允许用户选择新选项卡的事件名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为"click" 。 Syntax `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	heightStyle 此选项控制选项卡窗口小部件和每个面板的高度。默认情况下，其值为"content" 。 Option - heightStyle 此选项控制选项卡窗口小部件和每个面板的高度。默认情况下，其值为"content" 。可能的值是 - auto - 所有面板将设置为最高面板的高度。 fill - 根据选项卡的父高度扩展到可用高度。 content - 每个面板仅与其内容一样高。 Syntax `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	hide 此选项指定如何为面板隐藏设置动画。默认情况下，其值为null 。 Option - hide 此选项指定如何为面板隐藏设置动画。默认情况下，其值为null 。这可以是 - Boolean - 设置为false ，不使用任何动画，面板将立即隐藏。 Number - 面板将以指定的持续时间和默认缓动淡出。 String - 将使用指定的效果隐藏面板。值可以是slideUp或fold Object - 对于此类型，可以提供属性effect ， delay ， duration easing 。 Syntax `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
7	show 此选项指定如何动画显示面板。默认情况下，其值为null 。 Option - show 此选项指定如何动画显示面板。默认情况下，其值为null 。这可以是 - Boolean - 设置为false ，不使用任何动画，面板将立即显示。 Number - 面板将以指定的持续时间和默认缓动淡出。 String - 将使用指定的效果显示面板。值可以是slideUp或fold 。 Object - 对于此类型，可以提供属性effect ， delay ， duration easing 。 Syntax `$( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );`

JqueryUI - 教程

JqueryUI - 概述

JqueryUI - 环境设置( Environment Setup)

JqueryUI - 可拖动( Draggable)

JqueryUI - Droppable( Droppable)

JqueryUI - 可调整大小( Resizable)

JqueryUI - 可选( Selectable)

JqueryUI - 可排序( Sortable)

JqueryUI - 手风琴( Accordion)

JqueryUI - 自动完成( Autocomplete)

JqueryUI - 按钮( Button)

JqueryUI - Datepicker( Datepicker)

JqueryUI - 对话( Dialog)

JqueryUI - Menu

JqueryUI - Progressbar( Progressbar)

JqueryUI - 滑块( Slider)

JqueryUI - Spinner( Spinner)

JqueryUI - Tabs

JqueryUI - 工具提示( Tooltip)

JqueryUI - 添加类( Add Class)

JqueryUI - Color 动画 Animation

JqueryUI - 效果( Effect)

JqueryUI - Hide

JqueryUI - 删除类( Remove Class)

JqueryUI - Show

JqueryUI - Switch类( Switch Class)

JqueryUI - 切换( Toggle)

JqueryUI - 切换类( Toggle Class)

JqueryUI - 位置( Position)

JqueryUI - Widget Factory( Widget Factory)

JqueryUI - 快速指南

JqueryUI - 有用的资源

JqueryUI - 讨论

JqueryUI - Tabs

语法 (Syntax)

$ (selector, context).tabs（选项）方法

语法 (Syntax)

默认功能

使用heightStyle，可折叠和隐藏

使用事件

$ (selector, context).tabs（“action”，params）方法

语法 (Syntax)

Use of Action Disable()

Use of Action Disable(index)

标签元素的事件管理

例子 (Example)