JQuery

jQueryUI - Day 11 (Tabs)

Before reading this article, I highly recommend reading the previous parts of the series:

Tabs widget is a single content area with multiple panels, each associated with a header in a list. Mainly tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab.

The following Markup must be used for Tabs to properly work:

  • Tabs must be in a list either ordered(<ol>) or unordered(<ul>).
  • Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribute.
  • Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.

Keyboard Interaction

Keyboard Command Description
UP/LEFT Move focus to the previous tab and activate focused tab after a short delay.
DOWN/RIGHT Move next to the previous tab and activate focused tab after a short delay.
CTRL+UP/LEFT Move focus to the previous tab and focused tab must be manually activated.
CTRL+ DOWN/RIGHT Move focus to the next tab and focused tab must be manually activated.
HOME Move focus to the first tab and activate focused tab after a short delay.
END Move focus to the last tab and activate focused tab after a short delay.
CTRL+HOME Move focus to the first tab and focused tab must be manually activated.
CTRL+END Move focus to the last tab and focused tab must be manually activated.
SPACE Activate panel associated with focused tab.
ENTER Activate or toggle panel associated with focused tab.

Example

  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     $("#tabs-1").tabs();  
  13.                 });  
  14.                 </script>  
  15.                 <style>  
  16.                 #div1 {  
  17.                     background-color: coral;  
  18.                     color: ButtonHighlight;  
  19.                     font-size: 20px;  
  20.                     height: 450px;  
  21.                     width: 1000px;  
  22.                     text-align: center;  
  23.                     margin-left: 150px;  
  24.                 }  
  25.                   
  26.                 #tabs-1 {  
  27.                     margin-top: 20px;  
  28.                 }  
  29.                 </style>  
  30.                 </head>  
  31.   
  32.                 <body>  
  33.                     <div id="div1"> <span>************Tabs*************</span>  
  34.                         <div id="tabs-1">  
  35.                             <ul>  
  36.                                 <li>  
  37.                                     <a href="#tabs-2">Delhi</a>  
  38.                                 </li>  
  39.                                 <li>  
  40.                                     <a href="#tabs-3">Mumbai</a>  
  41.                                 </li>  
  42.                                 <li>  
  43.                                     <a href="#tabs-4">Jaipur</a>  
  44.                                 </li>  
  45.                                 <li>  
  46.                                     <a href="#tabs-5">Amritsar</a>  
  47.                                 </li>  
  48.                             </ul>  
  49.                             <div id="tabs-2">  
  50.                                 <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, a vibrant bazaar filled with food carts, sweets shops and spice stalls </p>  
  51.                                 </div>  
  52.                                 <div id="tabs-3">  
  53.                                     <p>Mumbai City District is a district of Maharashtra in Konkan Division. As a city district, it has no headquarters or subdivisions. It, along with the Mumbai Suburban District, makes up the metropolis of Mumbai </p>  
  54.                                     </div>  
  55.                                     <div id="tabs-4">  
  56.                                         <p>Jaipur, the capital of India’s Rajasthan state, evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, collonaded City Palace complex, today houses several museum collections of textiles and art </p>  
  57.                                         </div>  
  58.                                         <div id="tabs-5">  
  59.                                             <p>Amritsar (also called Ambarsar) is a city in the northwestern Indian state of Punjab, not far from the border with Pakistan. At the center of its walled old town is the gilded Golden Temple (Harmandir Sahib), considered the holiest gurdwara, or religious complex, of the Sikh religion. It’s at the end of a causeway, surrounded by the sacred AmritSarovar lake, where pilgrims bathe. </p>  
  60.                                         </div>  
  61.                                     </div>  
  62.                                 </div>  
  63.                 </body>  
  64.   
  65.             </html>  
Output

Menu

Options

 

Option Description Example
active Define the current active tab/panel. By default value is 0. $("#tabs-1").tabs({ active: 2})
collapsible When set to true, the active panel can be closed. When set to false (the default), clicking on a selected tab does not deselect. $("#tabs-1").tabs({collapsible: true })
disabled Define array to indicate index tabs that are disabled. $("#tabs-1").tabs({ disabled: [0, 3] })
event Define type of event that the tabs should react to in order to activate the tab. By default value is “click”. $("#tabs-1").tabs({ event: "mouseover" })
heightStyle Define the height of the tabs widget and each panel. By default its value is "content". $("#tabs-1").tabs({ heightStyle: "fill" })
hide Define how to animate hiding of panel. By default its value is null. $("#tabs-1").tabs({ hide: { effect: "explode", duration: 1000 ,delay:500} })
show Define how to animate showing of panel. By default its value is null. $("#tabs-1").tabs({ show: { effect: "explode", duration: 1000 ,delay:500} })

Methods

Method Description Example
destroy() This method removes the tabs functionality completely. This will return the element back to its pre-init state. $("#tabs-1").tabs("destroy")
disable() This method disables all tabs. $("#tabs-1").tabs("disable")
disable(index) Disable the specified tab. $("#tabs-1").tabs("disabled", [1, 2, 3])
disable(href) Disables a tab. The selected tab cannot be disabled. $("#tabs-1").tabs("disabled","#tab2”)
enable() Enables all tabs. $("#tabs-1").tabs("enable")
enable(index) Enable a specified tab. $("#tabs-1").tabs("enable",3)
enable(href) Enables a tab. $("#tabs-1").tabs("enable","#tab2”)
instance() Retrieves the tabs's instance object. varab= $("#tabs-1").tabs("instance")
load(index) This action forces a reload of the indexed tab. $("#tabs-1").tabs("load", 2)
load(href) This action forces a reload of the indexed tab. $("#tabs-1").tabs("load", “#tab2”)
refresh() Recomputed the height of the tab that were added or removed directly in the DOM $("#tabs-1").tabs("refresh")
widget() Returns a jQuery object containing the tabs container. varab = $("#tabs-1").tabs("widget")
 



  

Events

Event Description Example
activate(event,ui) Triggered after a tab has been activated (after animation completes) $("#tabs-1").tabs({ activate: function (event, ui) { } })
beforeActivate(event,ui) This event is triggered before a the tab has been activated. $("#tabs-1").tabs({ beforeActivate: function (event, ui) { } })
beforeLoad(event,ui) Triggered when a remote tab is about to be loaded, after the beforeActivate event. $("#tabs-1").tabs({ beforeLoad: function (event, ui) { } })
create(event,ui) Event is triggered when tabs are created. $("#tabs-1").tabs({ create: function (event, ui) { } })
load(event,ui) Triggered after a remote tab has been loaded. $("#tabs-1").tabs({ load: function (event, ui) { } })

Let us take some example.

Example 1:

  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     varab = $("#tabs-1").tabs(  
  13.                     {  
  14.                         active: 2,  
  15.                         disabled: [0],  
  16.                         event: "mouseover",  
  17.                         heightStyle: "auto",  
  18.                         hide:  
  19.                         {  
  20.                             effect: "explode",  
  21.                             duration: 1000,  
  22.                             delay: 500  
  23.                         },  
  24.                         show:  
  25.                         {  
  26.                             effect: "slideDown",  
  27.                             duration: 800,  
  28.                             delay: 500  
  29.                         }  
  30.                     })  
  31.                 });  
  32.                 </script>  
  33.                 <style>  
  34.                 #div1 {  
  35.                     background-color: coral;  
  36.                     color: ButtonHighlight;  
  37.                     font-size: 20px;  
  38.                     height: 450px;  
  39.                     width: 800px;  
  40.                     text-align: center;  
  41.                     margin-left: 150px;  
  42.                 }  
  43.                   
  44.                 #tabs-1 {  
  45.                     margin-top: 20px;  
  46.                 }  
  47.                 </style>  
  48.                 </head>  
  49.   
  50.                 <body>  
  51.                     <div id="div1"> <span>************Tabs*************</span>  
  52.                         <div id="tabs-1">  
  53.                             <ul>  
  54.                                 <li>  
  55.                                     <a href="#tabs-2">Delhi</a>  
  56.                                 </li>  
  57.                                 <li>  
  58.                                     <a href="#tabs-3">Mumbai</a>  
  59.                                 </li>  
  60.                                 <li>  
  61.                                     <a href="#tabs-4">Jaipur</a>  
  62.                                 </li>  
  63.                                 <li>  
  64.                                     <a href="#tabs-5">Amritsar</a>  
  65.                                 </li>  
  66.                             </ul>  
  67.                             <div id="tabs-2">  
  68.                                 <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, a vibrant bazaar filled with food carts, sweets shops and spice stalls </p>  
  69.                                 </div>  
  70.                                 <div id="tabs-3">  
  71.                                     <p>Mumbai City District is a district of Maharashtra in Konkan Division. As a city district, it has no headquarters or subdivisions. It, along with the Mumbai Suburban District, makes up the metropolis of Mumbai </p>  
  72.                                     </div>  
  73.                                     <div id="tabs-4">  
  74.                                         <p>Jaipur, the capital of India’s Rajasthan state, evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, collonaded City Palace complex, today houses several museum collections of textiles and art </p>  
  75.                                         </div>  
  76.                                         <div id="tabs-5">  
  77.                                             <p>Amritsar (also called Ambarsar) is a city in the northwestern Indian state of Punjab, not far from the border with Pakistan. At the center of its walled old town is the gilded Golden Temple (Harmandir Sahib), considered the holiest gurdwara, or religious complex, of the Sikh religion. It’s at the end of a causeway, surrounded by the sacred AmritSarovar lake, where pilgrims bathe. </p>  
  78.                                         </div>  
  79.                                     </div>  
  80.                                 </div>  
  81.                 </body>  
  82.   
  83.             </html>  
Output

Output

In above example we define the value of “active” option to 2 so “Jaipur” tan will be activated initially and “Delhi” will be disabled. Tab will be activate and deactivate on “mouseover” event. We define the “explode” animation for hide and “slideDown” animation for “show” method.

Example 2
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     varab = $("#tabs-1").tabs(  
  13.                     {  
  14.                         active: 2,  
  15.                         disabled: [0],  
  16.                         event: "mouseover",  
  17.                         heightStyle: "auto",  
  18.                         hide:  
  19.                         {  
  20.                             effect: "explode",  
  21.                             duration: 1000,  
  22.                             delay: 500  
  23.                         },  
  24.                         show:  
  25.                         {  
  26.                             effect: "slideDown",  
  27.                             duration: 800,  
  28.                             delay: 500  
  29.                         },  
  30.                         activate: function (event, ui)  
  31.                         {  
  32.                             $("#txt").append("Activated ")  
  33.                         },  
  34.                         create: function (event, ui)  
  35.                         {  
  36.                             $("#txt").append("Created ")  
  37.                         },  
  38.                         beforeActivate: function (event, ui)  
  39.                         {  
  40.                             $("#txt").append("Before Activate ")  
  41.                         },  
  42.                         beforeLoad: function (event, ui)  
  43.                         {  
  44.                             $("#txt").append("Before Load ")  
  45.                         }  
  46.                     })  
  47.                 });  
  48.                 </script>  
  49.                 <style>  
  50.                 #div1 {  
  51.                     background-color: coral;  
  52.                     color: ButtonHighlight;  
  53.                     font-size: 20px;  
  54.                     height: 450px;  
  55.                     width: 800px;  
  56.                     text-align: center;  
  57.                     margin-left: 150px;  
  58.                 }  
  59.                   
  60.                 #tabs-1 {  
  61.                     margin-top: 20px;  
  62.                 }  
  63.                 </style>  
  64.                 </head>  
  65.   
  66.                 <body>  
  67.                     <div id="div1"> <span>************Tabs*************</span>  
  68.                         <div id="tabs-1">  
  69.                             <ul>  
  70.                                 <li>  
  71.                                     <a href="#tabs-2">Delhi</a>  
  72.                                 </li>  
  73.                                 <li>  
  74.                                     <a href="#tabs-3">Mumbai</a>  
  75.                                 </li>  
  76.                                 <li>  
  77.                                     <a href="#tabs-4">Jaipur</a>  
  78.                                 </li>  
  79.                                 <li>  
  80.                                     <a href="#tabs-5">Amritsar</a>  
  81.                                 </li>  
  82.                             </ul>  
  83.                             <div id="tabs-2">  
  84.                                 <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, a vibrant bazaar filled with food carts, sweets shops and spice stalls </p>  
  85.                                 </div>  
  86.                                 <div id="tabs-3">  
  87.                                     <p>Mumbai City District is a district of Maharashtra in Konkan Division. As a city district, it has no headquarters or subdivisions. It, along with the Mumbai Suburban District, makes up the metropolis of Mumbai </p>  
  88.                                     </div>  
  89.                                     <div id="tabs-4">  
  90.                                         <p>Jaipur, the capital of India’s Rajasthan state, evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, collonaded City Palace complex, today houses several museum collections of textiles and art </p>  
  91.                                         </div>  
  92.                                         <div id="tabs-5">  
  93.                                             <p>Amritsar (also called Ambarsar) is a city in the northwestern Indian state of Punjab, not far from the border with Pakistan. At the center of its walled old town is the gilded Golden Temple (Harmandir Sahib), considered the holiest gurdwara, or religious complex, of the Sikh religion. It’s at the end of a causeway, surrounded by the sacred AmritSarovar lake, where pilgrims bathe. </p>  
  94.                                         </div>  
  95.                                     </div>  
  96.                                 <div id="txt">  
  97.                             </div>  
  98.                         </div>  
  99.                 </body>  
  100.   
  101.             </html>  
Output

Table

Above example is similar as previous, in extra we added some event listener for create, activate, beforeActivate and beforeLoad events.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs