jQuery UI tabs

jQuery UI tabs

选项卡是一组逻辑分组的内容,可帮助用户在它们之间进行切换。选项卡可以像手风琴一样节省空间。
每个选项卡都必须使用以下标记集才能正常工作。

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

jQuery UI tabs()方法用于更改页面内HTML元素的外观。此方法遍历HTML代码,并向该元素添加新的CSS类以为其提供适当的样式。
语法:
您可以以两种形式使用tabs()方法:
 $(selector, context).tabs(options)
 $(selector, context).tabs("action", params)

第一个方法

tabs(options)方法指定应将HTML元素及其内容作为选项卡进行管理。这里的"选项"参数是一个对象,用于指定选项卡的外观和行为。
语法:
 $(selector, context).tabs(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).tabs({option1: value1, option2: value2..... });
以下是可以与该方法一起使用的选项列表:
选项 说明
active 此选项指示当前活动的选项卡/面板。默认情况下,其值为0。
collapsible 如果将此选项设置为TRUE,则可以取消选择选项卡。如果将其设置为false(默认值),则单击选定的选项卡不会取消选择(保持选中状态)。默认情况下,其值为false。
disabled 此选项使用数组来指示已禁用(因此无法选择)的索引选项卡。例如,使用[0,1]禁用前两个标签。默认情况下,其值为false。
event 此选项是事件的名称,可让用户选择一个新选项卡。例如,如果将此选项设置为" mouseover",则将鼠标移到选项卡上将选中它。默认情况下,其值为" click"。
heightStyle 此选项控制选项卡小部件的高度。默认情况下,其值为" content"。
hide 此选项指定如何设置面板隐藏动画。默认情况下,其值为null。
show 此选项指定如何对面板显示进行动画处理。默认情况下,其值为NULL。

jQuery UI tabs()示例1

让我们举一个简单的示例来演示tab的功能,不将任何参数传递给tabs()方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-1">
         <ul>
            <li><a href="#tabs-2">Poem</a></li>
            <li><a href="#tabs-3">Joke</a></li>
            <li><a href="#tabs-4">Quote</a></li>
         </ul>
         <div id="tabs-2">
            <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
         </div>
         <div id="tabs-3">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
         </div>
         <div id="tabs-4">
            <p>" The whole secret of existence is to have no fear."
Buddha</p>
         </div>
      </div>
   </body>
</html>

jQuery UI tabs()示例2

heightStyle的使用,可折叠和隐藏:
让我们举一个例子在jQueryUI的tabs函数中演示heightStyle选项的用法,可折叠和隐藏。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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:lightpink;
            border: 1px solid #b9cd6d;
            color: yellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-5">
         <ul>
            <li><a href="#tabs-6">Poem</a></li>
            <li><a href="#tabs-7">Joke</a></li>
            <li><a href="#tabs-8">Quote</a></li>
         </ul>
         <div id="tabs-6">
                        <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
         </div>
         <div id="tabs-7">
           <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
            </div>
         <div id="tabs-8">
                        <p>" The whole secret of existence is to have no fear."
Buddha</p>
         </div>
      </div>
   </body>
</html>

jQuery UI tabs()示例3

事件的使用:
让我们以一个示例来演示使用jQueryUI的标签功能中的选项事件。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-9">
         <ul>
            <li><a href="#tabs-10">Poem</a></li>
            <li><a href="#tabs-11">Joke</a></li>
            <li><a href="#tabs-12">Quote</a></li>
         </ul>
         <div id="tabs-10">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
         </div>
         <div id="tabs-11">
          <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-12">
           <p>" The whole secret of existence is to have no fear."
Buddha</p>
       </div>
      </div>
   </body>
</html>

第二种方法

tabs ("action",params)方法允许对选项卡进行操作(通过JavaScript程序)以选择,禁用,添加或删除选项卡。在这里,"操作"在第一个参数中指定为字符串(例如,"添加"以添加新标签)。
语法:
 $(selector, context).tabs("action", params);
以下是可与该方法一起使用的不同操作的列表。
动作 说明
destroy 此操作将完全destroy元素的选项卡功能,并使元素返回其初始状态。此方法不接受任何参数。
disable 此操作将禁用所有选项卡。此方法不接受任何参数。
disable(index) 此操作用于禁用指定的选项卡。这里的index是要禁用的标签。
enable 此操作将激活所有选项卡。此签名不接受任何参数。
enable(index) 此操作将激活指定的选项卡。索引是要启用的标签。
load(index) 此操作将强制重新加载索引的选项卡,而忽略缓存。这里的index是要加载的标签。
option(optionName) 此操作获取当前与指定的optionName关联的值。
option 此操作获取一个对象,该对象包含表示当前选项卡选项哈希的键/值对。
option(optionName,value) 此操作设置与指定的optionName关联的tabs选项的值。参数optionName是要设置的选项的名称,value是要设置的选项的值。
option(Options) 此操作会将一个或多个选项设置到选项卡。
refresh 当直接在DOM中添加或删除任何选项卡时,此操作将重新计算选项卡面板的高度。其结果取决于内容和heightStyle选项。
widget 此操作将返回用作选项卡小部件的元素,并带有UI-tabs类名。

jQuery UI tabs()示例4

使用动作diable():
让我们例子来了解如何使用action disable()方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
 </div>
         <div id="tabs-15">
                     <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-16">
                      <p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
      </div>
   </body>
</html>