JqueryUI - 选项卡

选项卡是按逻辑分组的内容集，使我们能够在它们之间快速切换。选项卡可以让我们像手风琴一样节省空间。为了使选项卡正常工作，需要使用以下一组标记 -

选项卡必须位于有序 (<ol>) 或无序 (<ul>) 列表中。
每个选项卡标题必须位于每个 <li> 内，并由带有href属性的锚点 (<a>) 标记包裹。
每个选项卡面板可以是任何有效元素，但它必须有一个id，该 id 对应于关联选项卡锚点中的哈希值。

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

句法

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

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

$(选择器,上下文).tabs(选项)方法

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

句法

$(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	积极的此选项指定当前活动选项卡/面板。默认情况下其值为0。选项 - 激活此选项指定当前活动选项卡/面板。默认情况下其值为0。这可以是类型 - Boolean - 当设置为false时，将折叠所有面板。这要求可折叠选项为true。整数- 活动（打开）面板的从零开始的索引。负值选择从最后一个面板向后移动的面板。句法 $( ".selector" ).tabs ( { active: 1 } );
2	可折叠的此选项设置为true，它允许取消选择选项卡。当设置为 false（默认值）时，单击选定的选项卡不会取消选择（它仍保持选定状态）。默认情况下它的值为false。选项 - 可折叠此选项设置为true，它允许取消选择选项卡。当设置为 false（默认值）时，单击选定的选项卡不会取消选择（它仍保持选定状态）。默认情况下它的值为false。句法 $( ".selector" ).tabs ( { collapsible: true } );
3	残疾人此选项使用数组来指示已禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下它的值为false。选项 - 禁用此选项使用数组来指示已禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下它的值为false。这可以是类型 - 布尔值- 启用或禁用所有选项卡。数组- 包含应禁用的选项卡的从零开始的索引的数组，例如 [ 0, 2 ] 将禁用第一个和第三个选项卡。句法 $( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );
4	事件此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为“click”。选项 - 事件此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为“click”。句法 $( ".selector" ).tabs ( { event: "mouseover" } );
5	高度样式此选项控制选项卡小部件和每个面板的高度。默认情况下它的值为"content"。选项 - heightStyle 此选项控制选项卡小部件和每个面板的高度。默认情况下它的值为"content"。可能的值为 - auto - 所有面板将设置为最高面板的高度。 fill - 根据选项卡的父高度扩展到可用高度。 content - 每个面板的高度仅与其内容一样高。句法 $( ".selector" ).tabs ( { heightStyle: "fill" } );
6	隐藏此选项指定如何以动画方式隐藏面板。默认情况下它的值为null。选项-隐藏此选项指定如何以动画方式隐藏面板。默认情况下它的值为null。这可以是类型 - Boolean − When set to false, no animation will be used and the panel will be hidden immediately. Number − The panel will fade out with the specified duration and the default easing. String − The panel will be hidden using the specified effect. Value can be slideUp or fold Object − For this type, properties effect, delay, duration and easing may be provided. Syntax $( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );
7	展示此选项指定如何以动画方式显示面板。默认情况下它的值为null。 Option - show This option specifies how to animate showing of panel. By default its value is null. This can be of type − Boolean − When set to false, no animation will be used and the panel will be shown immediately. Number − The panel will fade out with the specified duration and the default easing. String − The panel will be shown using the specified effect. Value can be slideUp or fold. Object − For this type, properties effect, delay, duration and easing may be provided. 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、collapsible 和 hide

以下示例演示了JqueryUI 的选项卡功能中三个选项(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>

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

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

活动的利用

下面的例子演示了JqueryUI的tabs功能中三个options事件的用法。

<!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 程序），选择、禁用、添加或删除选项卡。该操作在第一个参数中指定为字符串（例如，“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	破坏此操作完全破坏了元素的选项卡功能。元素返回到其初始化前的状态。此方法不接受任何参数。 Action - destroy This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments. Syntax $( ".selector" ).tabs("destroy");
2	禁用此操作会禁用所有选项卡。此方法不接受任何参数。 Action - disable This action disables all tabs. This method does not accept any arguments. Syntax $( ".selector" ).tabs("disable");
3	禁用（索引）此操作会禁用指定的选项卡。其中index是要禁用的选项卡。 Action - disable( index ) This action disables the specified tab. Where index is the tab to be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ). Syntax $( ".selector" ).tabs( "disable", 1 );
4	使能够此操作将激活所有选项卡。该签名不接受任何参数。 Action - enable This action activates all the tabs. This signature does not accept any arguments. Syntax $( ".selector" ).tabs("enable");
5	启用（索引）此操作激活指定的选项卡。其中index是要启用的选项卡。 Action - enable( index ) This action activates a specified tab. Where index is the tab to be enabled. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );. Syntax $( ".selector" ).tabs( "enable", 1 );
6	负载（索引）此操作强制重新加载索引选项卡，忽略缓存。其中index是要加载的选项卡。 Action - load( index ) This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load. Syntax $( ".selector" ).tabs("load", 1);
7	选项（选项名称）此操作获取当前与指定optionName关联的值。 Action - option( optionName ) This action gets the value currently associated with the specified optionName. Syntax var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8	选项此操作获取一个对象，其中包含表示当前选项卡选项哈希的键/值对。 Action - option This action gets an object containing key/value pairs representing the current tabs options hash. This method does not accept any arguments. Syntax $( ".selector" ).tabs("option");
9	选项（选项名称，值）此操作设置与指定optionName关联的 tabs 选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Action - option( optionName, value ) This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option. Syntax $( ".selector" ).tabs( "option", "disabled", true );
10	选项（选项）此操作为选项卡设置一个或多个选项。 Action - option( options ) This action sets one or more options to the tabs. Syntax $( ".selector" ).tabs( "option", { disabled: true } );
11	刷新当直接在 DOM 中添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和heightStyle选项。 Action - refresh This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option. Syntax $( ".selector" ).tabs( "refresh" );
12	小部件此操作返回用作选项卡小部件的元素，并用ui-tabs类名进行注释。 Action - widget This action returns the element serving as the tabs widget, annotated with the ui-tabs class name. Syntax var widget = $( ".selector" ).tabs( "widget" );

使用动作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 的标准浏览器中打开它，您还必须看到以下输出 -

在这里您可以看到所有选项卡均已禁用。

动作禁用的使用（索引）

现在让我们看一个使用上表中的操作的示例。下面的例子演示了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 被禁用。

选项卡元素上的事件管理

除了我们在前面几节中看到的选项卡（选项）方法之外，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	激活（事件，用户界面）该事件在选项卡激活后（动画完成后）触发。 Event - activate(event, ui) This event is triggered after the tab has been activated (after the completion of animation). Where event is of type Event, and ui is of type Object. Possible values of ui are − newTab − The tab that was just activated. oldTab − The tab that was just deactivated. newPanel − The panel that was just activated. oldPanel − The panel that was just deactivated. Syntax $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate（事件，用户界面）该事件在选项卡激活之前触发。 Event - beforeActivate(event, ui) This event is triggered before a the tab has been activated. Where event is of type Event, and ui is of type Object. Possible values of ui are − newTab − The tab that is about to be activated. oldTab − The tab that is about to be deactivated. newPanel − The panel is about to be activated. oldPanel − The panel is about to be deactivated. Syntax $( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });
3	beforeLoad（事件，用户界面）在beforeActivate事件之后，当即将加载远程选项卡时，会触发此事件。该事件在发出 Ajax 请求之前触发。 Event - beforeLoad(event, ui) This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The tab that is being loaded. panel − The panel which will be populated by the Ajax response. jqXHR − The jqXHR object that is requesting the content. ajaxSettings − The settings that will be used by jQuery.ajax to request the content. Syntax $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	创建（事件，用户界面）创建选项卡时会触发此事件。 Event - create(event, ui) This event is triggered when tabs are created. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The active tab. panel − The active panel. Syntax $( ".selector" ).slider({ create: function( event, ui ) {} });
5	加载（事件，用户界面）加载远程选项卡后会触发此事件。 Event - load(event, ui) This event is triggered after a remote tab has been loaded. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The tab that was just loaded. panel − The panel which was just populated by the Ajax response. Syntax $( ".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	积极的此选项指定当前活动选项卡/面板。默认情况下其值为0。选项 - 激活此选项指定当前活动选项卡/面板。默认情况下其值为0。这可以是类型 - Boolean - 当设置为false时，将折叠所有面板。这要求可折叠选项为true。整数- 活动（打开）面板的从零开始的索引。负值选择从最后一个面板向后移动的面板。句法 $( ".selector" ).tabs ( { active: 1 } );
2	可折叠的此选项设置为true，它允许取消选择选项卡。当设置为 false（默认值）时，单击选定的选项卡不会取消选择（它仍保持选定状态）。默认情况下它的值为false。选项 - 可折叠此选项设置为true，它允许取消选择选项卡。当设置为 false（默认值）时，单击选定的选项卡不会取消选择（它仍保持选定状态）。默认情况下它的值为false。句法 $( ".selector" ).tabs ( { collapsible: true } );
3	残疾人此选项使用数组来指示已禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下它的值为false。选项 - 禁用此选项使用数组来指示已禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下它的值为false。这可以是类型 - 布尔值- 启用或禁用所有选项卡。数组- 包含应禁用的选项卡的从零开始的索引的数组，例如 [ 0, 2 ] 将禁用第一个和第三个选项卡。句法 $( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );
4	事件此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为“click”。选项 - 事件此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为“鼠标悬停”，则将鼠标移到选项卡上将选择它。默认情况下，其值为“click”。句法 $( ".selector" ).tabs ( { event: "mouseover" } );
5	高度样式此选项控制选项卡小部件和每个面板的高度。默认情况下它的值为"content"。选项 - heightStyle 此选项控制选项卡小部件和每个面板的高度。默认情况下它的值为"content"。可能的值为 - auto - 所有面板将设置为最高面板的高度。 fill - 根据选项卡的父高度扩展到可用高度。 content - 每个面板的高度仅与其内容一样高。句法 $( ".selector" ).tabs ( { heightStyle: "fill" } );
6	隐藏此选项指定如何以动画方式隐藏面板。默认情况下它的值为null。选项-隐藏此选项指定如何以动画方式隐藏面板。默认情况下它的值为null。这可以是类型 - Boolean − When set to false, no animation will be used and the panel will be hidden immediately. Number − The panel will fade out with the specified duration and the default easing. String − The panel will be hidden using the specified effect. Value can be slideUp or fold Object − For this type, properties effect, delay, duration and easing may be provided. Syntax $( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );
7	展示此选项指定如何以动画方式显示面板。默认情况下它的值为null。 Option - show This option specifies how to animate showing of panel. By default its value is null. This can be of type − Boolean − When set to false, no animation will be used and the panel will be shown immediately. Number − The panel will fade out with the specified duration and the default easing. String − The panel will be shown using the specified effect. Value can be slideUp or fold. Object − For this type, properties effect, delay, duration and easing may be provided. Syntax $( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );

先生。	动作与描述
1	破坏此操作完全破坏了元素的选项卡功能。元素返回到其初始化前的状态。此方法不接受任何参数。 Action - destroy This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments. Syntax $( ".selector" ).tabs("destroy");
2	禁用此操作会禁用所有选项卡。此方法不接受任何参数。 Action - disable This action disables all tabs. This method does not accept any arguments. Syntax $( ".selector" ).tabs("disable");
3	禁用（索引）此操作会禁用指定的选项卡。其中index是要禁用的选项卡。 Action - disable( index ) This action disables the specified tab. Where index is the tab to be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ). Syntax $( ".selector" ).tabs( "disable", 1 );
4	使能够此操作将激活所有选项卡。该签名不接受任何参数。 Action - enable This action activates all the tabs. This signature does not accept any arguments. Syntax $( ".selector" ).tabs("enable");
5	启用（索引）此操作激活指定的选项卡。其中index是要启用的选项卡。 Action - enable( index ) This action activates a specified tab. Where index is the tab to be enabled. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );. Syntax $( ".selector" ).tabs( "enable", 1 );
6	负载（索引）此操作强制重新加载索引选项卡，忽略缓存。其中index是要加载的选项卡。 Action - load( index ) This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load. Syntax $( ".selector" ).tabs("load", 1);
7	选项（选项名称）此操作获取当前与指定optionName关联的值。 Action - option( optionName ) This action gets the value currently associated with the specified optionName. Syntax var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8	选项此操作获取一个对象，其中包含表示当前选项卡选项哈希的键/值对。 Action - option This action gets an object containing key/value pairs representing the current tabs options hash. This method does not accept any arguments. Syntax $( ".selector" ).tabs("option");
9	选项（选项名称，值）此操作设置与指定optionName关联的 tabs 选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Action - option( optionName, value ) This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option. Syntax $( ".selector" ).tabs( "option", "disabled", true );
10	选项（选项）此操作为选项卡设置一个或多个选项。 Action - option( options ) This action sets one or more options to the tabs. Syntax $( ".selector" ).tabs( "option", { disabled: true } );
11	刷新当直接在 DOM 中添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和heightStyle选项。 Action - refresh This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option. Syntax $( ".selector" ).tabs( "refresh" );
12	小部件此操作返回用作选项卡小部件的元素，并用ui-tabs类名进行注释。 Action - widget This action returns the element serving as the tabs widget, annotated with the ui-tabs class name. Syntax var widget = $( ".selector" ).tabs( "widget" );

先生。	活动方式及说明
1	激活（事件，用户界面）该事件在选项卡激活后（动画完成后）触发。 Event - activate(event, ui) This event is triggered after the tab has been activated (after the completion of animation). Where event is of type Event, and ui is of type Object. Possible values of ui are − newTab − The tab that was just activated. oldTab − The tab that was just deactivated. newPanel − The panel that was just activated. oldPanel − The panel that was just deactivated. Syntax $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate（事件，用户界面）该事件在选项卡激活之前触发。 Event - beforeActivate(event, ui) This event is triggered before a the tab has been activated. Where event is of type Event, and ui is of type Object. Possible values of ui are − newTab − The tab that is about to be activated. oldTab − The tab that is about to be deactivated. newPanel − The panel is about to be activated. oldPanel − The panel is about to be deactivated. Syntax $( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });
3	beforeLoad（事件，用户界面）在beforeActivate事件之后，当即将加载远程选项卡时，会触发此事件。该事件在发出 Ajax 请求之前触发。 Event - beforeLoad(event, ui) This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The tab that is being loaded. panel − The panel which will be populated by the Ajax response. jqXHR − The jqXHR object that is requesting the content. ajaxSettings − The settings that will be used by jQuery.ajax to request the content. Syntax $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	创建（事件，用户界面）创建选项卡时会触发此事件。 Event - create(event, ui) This event is triggered when tabs are created. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The active tab. panel − The active panel. Syntax $( ".selector" ).slider({ create: function( event, ui ) {} });
5	加载（事件，用户界面）加载远程选项卡后会触发此事件。 Event - load(event, ui) This event is triggered after a remote tab has been loaded. Where event is of type Event, and ui is of type Object. Possible values of ui are − tab − The tab that was just loaded. panel − The panel which was just populated by the Ajax response. Syntax $( ".selector" ).slider({ load: function( event, ui ) {} });