JqueryUI - 选项卡小部件

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

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

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

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

heightStyle、collapsible、hide的使用

下面的例子演示了三个选项(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>

单击选定的选项卡可将其内容切换为关闭/打开。您还可以在关闭选项卡时看到动画效果"slideUp"。

事件的使用

下面的例子演示了三个选项event在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-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);;

下表列出了可与此方法一起使用的不同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" );

序号	操作 & 说明
1	destroy 此操作完全破坏了元素的选项卡功能。元素返回到它们的预初始化状态。此方法不接受任何参数。 Action - destroy 此操作完全破坏了元素的选项卡功能。元素返回到它们的预初始化状态。此方法不接受任何参数。语法 $( ".selector" ).tabs("destroy");
2	disable 此操作禁用所有选项卡。此方法不接受任何参数。 Action - disable 此操作禁用所有选项卡。此方法不接受任何参数。语法 $( ".selector" ).tabs("disable");
3	disable( index ) 此操作禁用指定的选项卡。其中 index 是要禁用的选项卡。 Action - disable( index ) 此操作禁用指定的选项卡。其中 index 是要禁用的选项卡。要一次禁用多个选项卡，请设置禁用选项：$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )。语法 $( ".selector" ).tabs( "disable", 1 );
4	enable 此操作会激活所有选项卡。此签名不接受任何参数。 Action - enable 此操作会激活所有选项卡。此签名不接受任何参数。语法 $( ".selector" ).tabs("enable");
5	enable( index ) 此操作激活指定的选项卡。其中 index 是要启用的选项卡。 Action - enable( index ) 此操作激活指定的选项卡。其中 index 是要启用的选项卡。要一次启用多个选项卡，请重置禁用属性，如：$( "#example" ).tabs( "option", "disabled", [] );。语法 $( ".selector" ).tabs( "enable", 1 );
6	load( index ) 此操作会强制重新加载索引选项卡，忽略缓存。 index 是要加载的标签。 Action - load( index ) 此操作会强制重新加载索引选项卡，忽略缓存。 index 是要加载的标签。语法 $( ".selector" ).tabs("load", 1);
7	option( optionName ) 此操作获取当前与指定的 optionName 关联的值。 Action - option( optionName ) 此操作获取当前与指定的 optionName 关联的值。语法 var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8	option 此操作获取一个包含表示当前选项卡选项哈希的键/值对的对象。 Action - option 此操作获取一个包含表示当前选项卡选项哈希的键/值对的对象。此方法不接受任何参数。语法 $( ".selector" ).tabs("option");
9	option( optionName, value ) 此操作设置与指定的 optionName 关联的选项卡选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的 optionName 关联的选项卡选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。语法 $( ".selector" ).tabs( "option", "disabled", true );
10	option( options ) 此操作为选项卡设置一个或多个选项。 Action - option( options ) 此操作为选项卡设置一个或多个选项。语法 $( ".selector" ).tabs( "option", { disabled: true } );
11	refresh 当直接在 DOM 中添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和 heightStyle 选项。 Action - refresh 当直接在 DOM 中添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。结果取决于内容和 heightStyle 选项。语法 $( ".selector" ).tabs( "refresh" );
12	widget 此操作返回用作选项卡小部件的元素，并使用 ui-tabs 类名称进行注释。 Action - widget 此操作返回用作选项卡小部件的元素，并使用 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 被禁用。

标签元素上的事件管理

除了我们在前面部分看到的选项卡（选项）方法之外，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) 此事件在选项卡被激活后（动画完成后）触发。 Event - activate(event, ui) 此事件在选项卡被激活后（动画完成后）触发。其中event是Event类型，ui是Object类型。 ui 的可能值是 − newTab − 刚刚激活的选项卡。 oldTab − 刚刚停用的选项卡。 newPanel − 刚刚激活的面板。 oldPanel − 刚刚停用的面板。语法 $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate(event, ui) 此事件在选项卡被激活之前触发。 Event - beforeActivate(event, ui) 在激活选项卡之前触发此事件。其中event是Event类型，ui是Object类型。 ui 的可能值是 − newTab − 即将激活的标签页。 oldTab − 即将停用的选项卡。 newPanel − 面板即将被激活。 oldPanel − 该面板即将停用。语法 $( ".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 将用于请求内容的设置。语法 $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	create(event, ui) 创建选项卡时会触发此事件。 Event - create(event, ui) 创建选项卡时会触发此事件。其中event是Event类型，ui是Object类型。 ui 的可能值是 − tab − 活动选项卡。 panel − 活动面板。语法 $( ".selector" ).slider({ create: function( event, ui ) {} });
5	load(event, ui) 此事件在加载远程选项卡后触发。 Event - 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。 Option - active 此选项指定当前活动的选项卡/面板。默认情况下，它的值为 0。这可以是类型 − Boolean − 当设置为 false 时，将折叠所有面板。这需要 collapsible 选项为 true。 Integer − 活动（打开）面板的从零开始的索引。负值选择从最后一个面板向后移动的面板。语法 $( ".selector" ).tabs ( { active: 1 } );
2	collapsible 此选项设置为 true，它允许取消选择选项卡。当设置为 false（默认值）时，单击所选选项卡不会取消选择（它保持选中状态）。默认情况下，它的值为 false。 Option - collapsible 此选项设置为 true，它允许取消选择选项卡。当设置为 false（默认值）时，单击所选选项卡不会取消选择（它保持选中状态）。默认情况下，它的值为 false。语法 $( ".selector" ).tabs ( { collapsible: true } );
3	disabled 此选项使用数组来指示禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下，它的值为 false。 Option - disabled 此选项使用数组来指示禁用（因此无法选择）的索引选项卡。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下，它的值为 false。这可以是类型 − Boolean − 启用或禁用所有选项卡。 Array − 包含应禁用的选项卡的从零开始索引的数组，例如 [ 0, 2 ] 将禁用第一个和第三个选项卡。语法 $( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );
4	event 此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为"鼠标悬停"，则将鼠标悬停在选项卡上将选中它。默认情况下，它的值为 "click"。 Option - event 此选项是允许用户选择新选项卡的事件的名称。例如，如果此选项设置为"鼠标悬停"，则将鼠标悬停在选项卡上将选中它。默认情况下，它的值为 "click"。语法 $( ".selector" ).tabs ( { event: "mouseover" } );
5	heightStyle 此选项控制选项卡小部件和每个面板的高度。默认情况下，它的值为 "content"。 Option - heightStyle 此选项控制选项卡小部件和每个面板的高度。默认情况下，它的值为 "content"。可能的值是 − auto − 所有面板都将设置为最高面板的高度。 fill − 根据选项卡的父高度扩展到可用高度。 content − 每个面板的高度将与其内容一样高。语法 $( ".selector" ).tabs ( { heightStyle: "fill" } );
6	hide 此选项指定如何动画隐藏面板。默认情况下，它的值为 null。 Option - hide 此选项指定如何动画隐藏面板。默认情况下，它的值为 null。这可以是类型 − Boolean − 当设置为false 时，将不使用动画并且面板将立即隐藏。 Number − 面板将以指定的持续时间和默认的缓动淡出。 String − 面板将使用指定的效果隐藏。值可以是 slideUp 或 fold Object − 对于这种类型，可以提供属性 effect、delay、duration 和 easing。语法 $( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );
7	show 此选项指定如何动画显示面板。默认情况下，它的值为 null。 Option - show 此选项指定如何动画显示面板。默认情况下，它的值为 null。这可以是类型 − Boolean − 当设置为 false 时，将不使用动画，面板将立即显示。 Number − 面板将以指定的持续时间和默认的缓动淡出。 String − 面板将使用指定的效果显示。值可以是 slideUp 或 fold。 Object − 对于这种类型，可以提供属性 effect、delay、duration 和 easing。语法 $( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );

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

序号	事件方法 & 说明
1	activate(event, ui) 此事件在选项卡被激活后（动画完成后）触发。 Event - activate(event, ui) 此事件在选项卡被激活后（动画完成后）触发。其中event是Event类型，ui是Object类型。 ui 的可能值是 − newTab − 刚刚激活的选项卡。 oldTab − 刚刚停用的选项卡。 newPanel − 刚刚激活的面板。 oldPanel − 刚刚停用的面板。语法 $( ".selector" ).slider({ activate: function( event, ui ) {} });
2	beforeActivate(event, ui) 此事件在选项卡被激活之前触发。 Event - beforeActivate(event, ui) 在激活选项卡之前触发此事件。其中event是Event类型，ui是Object类型。 ui 的可能值是 − newTab − 即将激活的标签页。 oldTab − 即将停用的选项卡。 newPanel − 面板即将被激活。 oldPanel − 该面板即将停用。语法 $( ".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 将用于请求内容的设置。语法 $( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });
4	create(event, ui) 创建选项卡时会触发此事件。 Event - create(event, ui) 创建选项卡时会触发此事件。其中event是Event类型，ui是Object类型。 ui 的可能值是 − tab − 活动选项卡。 panel − 活动面板。语法 $( ".selector" ).slider({ create: function( event, ui ) {} });
5	load(event, ui) 此事件在加载远程选项卡后触发。 Event - load(event, ui) 加载远程选项卡后触发此事件。其中event是Event类型，ui是Object类型。 ui 的可能值是 − tab − 刚刚加载的选项卡。 panel − 刚刚由 Ajax 响应填充的面板。语法 $( ".selector" ).slider({ load: function( event, ui ) {} });

JqueryUI 教程

JqueryUI 交互

JqueryUI 小部件

JqueryUI 效果

JqueryUI 实用程序

JqueryUI 其他

JqueryUI - 选项卡小部件

语法

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

语法

默认功能

heightStyle、collapsible、hide的使用

事件的使用

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

语法

Action Disable()的使用

Action Disable(index)的使用

标签元素上的事件管理

示例

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！