jQuery UI Tabs

To modify the appearance of the HTML elements inside the page, by traversing the HTML code and by adding new CSS classes to the element, the jQuery UI tabs() method is used. A set of logically grouped content that also allows flipping between them is called tabs in JQuery UI. The JQuery UI Tabs are used to save space like accordions. The following set of markups is used by every tab so that it can work properly. Being itself in an ordered <ol> or unordered <ul> list, the title of the JQuery UI Tabs also must be within each <li>. The title of the JQuery UI Tabs should be wrapped by anchor (<a>) tag with a href attribute. With an id corresponding to the hash in the anchor of the associated tab, which is a must, a tab panel can be any valid element.

Syntax:

The tabs() method can be used in two forms:

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

OR

$(selector, context).tabs (“action”, params) Method

First Method:

To instruct that an HTML element and its content should be managed as tabs, the tabs (options) method is used. The appearance and behavior of tabs are defined by the options parameter, which is an object.

Syntax:

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

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

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

The various options that can be used with this method are listed below:

Option Uses
active To specify the current active tab/panel. The default value is 0.
collapsible To allow tabs to be deselected, when set to TRUE. On clicking a selected tab, it does not deselect and remains selected, when it is set to false. The default value is false.
disabled To indicate the index tabs that are disabled (and therefore cannot be selected). It uses an array. For example, the value [0, 1] is used to disable the first two tabs. The default value is false.
event To specify the name of the event that lets users select a new tab. Passing the mouse over a tab will select it, when set to “mouseover”. The default value is “click”.
heightStyle To control the height of the tabs widget. The default value is “content”.
hide To define the way to animate hiding of panel. The default value is null.
show To define the way to animate showing of panel. The default value is NULL.

Example 1:

<!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() {  
            $( "#tab-1" ).tabs();  
         });  
      </script>  
      <style>  
         #tab-1{font-size: 18px;}  
         .ui-widget-header {  
            background:crimson;  
            border: 2px solid black;  
         }  
      </style>  
   </head>  
   <body>  
      <div id="tab-1">  
         <ul>  
            <li><a href="#tab-2">Flower</a></li>  
            <li><a href="#tab-3">Fruit</a></li>  
            <li><a href="#tab-4">Vegetable</a></li>  
         </ul>  
         <div id="tab-2">  
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).  
</p>  
         </div>  
         <div id="tab-3">  
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>  
         </div>  
         <div id="tab-4">  
            <p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>  
         </div>  
      </div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are displaying the functionality of the tab. Here, we are passing no parameter to the tabs() method.

Example 2:

<!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() {  
            $( "#tab-1" ).tabs({  
               heightStyle:"fill",  
               collapsible:true,  
               hide:"slideUp"  
            });  
         });  
      </script>  
      <style>  
         #tab-1{font-size: 18px;}  
         .ui-widget-header {  
            background:crimson;  
            border: 2px solid black;   
         }  
      </style>  
   </head>  
   <body>  
      <div id="tab-1">  
         <ul>  
            <li><a href="#tab-2">Flower</a></li>  
            <li><a href="#tab-3">Fruit</a></li>  
            <li><a href="#tab-4">Vegetable</a></li>  
         </ul>  
         <div id="tab-2">  
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).  
</p>  
         </div>  
         <div id="tab-3">  
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>  
         </div>  
         <div id="tab-4">  
            <p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>  
         </div>  
      </div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and the behavior of the heightStyle, collapsible and hide options in the tabs function of jQueryUI. Here, the content of the tab slides up on clicking the title of the tab and get visible again on the next click.

Example 3:

<!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() {  
            $( "#tab-1" ).tabs({  
               event:"mouseover"  
            });  
         });  
      </script>  
      <style>  
         #tab-1{font-size: 18px;}  
         .ui-widget-header {  
           background:crimson;  
            border: 2px solid black; 
         }  
      </style>  
   </head>  
   <body>  
      <div id="tab-1">  
         <ul>  
            <li><a href="#tab-2">Flower</a></li>  
            <li><a href="#tab-3">Fruit</a></li>  
            <li><a href="#tab-4">Vegetable</a></li>  
         </ul>  
         <div id="tab-2">  
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).  
</p>  
         </div>  
         <div id="tab-3">  
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>  
         </div>  
         <div id="tab-4">  
            <p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>  
         </div>  
      </div>   
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and the behavior of event option in the tab function of jQueryUI. Here, we can switch between the tabs only by placing the mouse over the title of the tab. THus, no clicking is required in this case.

Second Method:

To allow an action on the tabs to select, disable, add or remove a tab, the tabs (“action”, params) method. It does so through a JavaScript program. The first argument here is “action” which is specified as a string. For example, to add a new tab, the “add” method is passed as a value to the “action” argument.

Syntax:

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

The various actions that can be used with this method are listed below:

Action Uses
destroy To destroy the tabs functionality of an element completely and makes elements return to their pre-init state. No argument is accepted by this method.
disable To disable all tabs. No argument is accepted by this method.
disable( index ) To disable the specified tab. The tab to be disabled is specified by the index parameter.
enable To activate all the tabs. No argument is accepted by this method.
enable( index ) To activate a specified tab. The tab to be enabled is specified by the index parameter.
load( index ) To force a reload of the indexed tab, ignoring the cache. The tab to load is specified by the index parameter.
option( optionName ) To retrieve the value currently associated with the specified optionName.
option To retrieve an object containing key/value pairs representing the current tabs options hash.
option( optionName, value ) To set the value of the tabs option associated with the specified optionName. The name of the option to be set is specified by the argument optionName and the value defines the value of the option to be set.
option( Options ) To set one or more options to the tabs.
refresh To re-compute the height of the tab panels when any tabs that were added or removed directly in the DOM. The output is based on the content and the heightStyle option.
widget To get the element serving as the tabs widget, annotated with the UI-tabs class name.

Example 4:

<!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() {  
            $( "#tab-1" ).tabs();  
            $( "#tab-1" ).tabs("disable");  
         });  
      </script>  
      <style>  
         #tab-1{font-size: 18px;}  
         .ui-widget-header {  
            background:gray;  
            border: 2px solid black;  
         }  
      </style>  
   </head>  
   <body>  
      <div id="tab-1">  
         <ul>  
            <li><a href="#tab-2">Flower</a></li>  
            <li><a href="#tab-3">Fruit</a></li>  
            <li><a href="#tab-4">Vegetable</a></li>  
         </ul>  
         <div id="tab-2">  
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).  
</p>  
         </div>  
         <div id="tab-3">  
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>  
         </div>  
         <div id="tab-4">  
            <p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>  
         </div>  
      </div>     
   </body>  
</html>

Output:

Explanation:

In the above example, we are displaying the usage and the behavior of the disable() method. Here, all the tabs are disabled and thus switching of tabs is not possible here.

Please Share