jQuery UI选项卡 


jQuery UI选项卡

选项卡是一组逻辑分组的内容,可帮助用户在它们之间进行切换。制表符像手风琴一样节省空间。

每个标签都必须使用以下标记集才能正常工作。

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

jQuery UI tabs()方法用于更改页面内HTML元素的外观。此方法遍历HTML代码,并向该元素添加新的CSS类以为其提供适当的样式。

句法:

您可以通过两种形式使用tabs()方法:

$(selector, context).tabs (options) Method
$(selector, context).tabs ("action", params) Method

第一种方法

选项卡(选项)方法指定应将HTML元素及其内容作为选项卡进行管理。这里的“选项”参数是一个对象,它指定选项卡的外观和行为。

句法:

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

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

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

以下是可用于此方法的选项列表:

Option Description
active This option indicates the current active tab/panel. By default its value is 0.
collapsible If you set this option to TRUE, it allows tabs to be deselected. When it is set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.
disabled This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). for example, use [0, 1] to disable the first two tabs. By default its value is false.
event This option is a name of the event that lets users select a new tab. If, for example, this option is set to “mouseover”, passing the mouse over a tab will select it. By default its value is “click”.
heightStyle This option controls the height of the tabs widget. By default its value is “content”.
hide This option specifies how to animate hiding of panel. By default its value is null.
show This option specifies how to animate showing of panel. By default its value is 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="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: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,可折叠和隐藏:

让我们以一个示例来演示heightUI选项的用法,可折叠和隐藏在jQueryUI的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="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: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的tab函数中选项事件的用法。

<!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="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: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>

第二种方法

选项卡(“操作”,参数)方法允许选项卡上的操作(通过JavaScript程序)选择,禁用,添加或删除选项卡。在这里,“操作”被指定为第一个参数中的字符串(例如,“添加”以添加新标签)。

句法:

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

以下是可与该方法一起使用的不同操作的列表。

Action Description
destroy This action destroys the tabs functionality of an element completely and makes elements return to their pre-init state. This method does not accept any arguments.
disable This action disables all tabs. This method does not accept any arguments.
disable( index ) This action is used to disable the specified tab. Here index is the tab to be disabled.
enable This action activates all the tabs. This signature does not accept any arguments.
enable( index ) This action activates a specified tab. Here index is the tab to be enabled.
load( index ) This action forces a reload of the indexed tab, ignoring the cache. Here index is the tab to load.
option( optionName ) This action gets the value currently associated with the specified optionName.
option This action gets an object containing key/value pairs representing the current tabs options hash.
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 of the option to be set.
option( Options ) This action sets one or more options to the tabs.
refresh This action re-computes the height of the tab panels when any tabs that were added or removed directly in the DOM. Its result depends on the content and the heightStyle option.
widget This action returns the element serving as the tabs widget, annotated with the UI-tabs class name.

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="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>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>

0



error: 内容受到保护 !!