Tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allow us to save space like accordions. For tabs to work properly following set of markups needs to use −
- Tabs must be in a list either ordered(<ol>) or unordered(<ul>).
- Each tab title must be within each <li> and wrapped by anchor (<a>) tag 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.
jQueryUI provides us tabs () method drastically changes the appearance of HTML elements inside the page. This method traverses (internally in jQuery UI) HTML code and adds new CSS classes to the elements concerned (here, the tabs) to give them the appropriate style.
Syntax
The tabs () method can be used in two forms −
- $(selector, context).tabs (options) Method
- $(selector, context).tabs (“action”, params) Method
$ (selector, context).tabs (options) Method
The tabs (options) method declares that an HTML element and its content should be managed as tabs. The options parameter is an object that specifies the appearance and behavior of tabs.
Syntax
$(selector, context).tabs (options);
You can provide one or more options at a time using JavaScript object. If there are more than one options to be provided then you will separate them using a comma as follows −$(selector, context).tabs({option1: value1, option2: value2….. });
The following table lists the different options that can be used with this method −
| Sr.No. | Option & Description |
|---|---|
| 1 | activeThis option specifies the current active tab/panel. By default its value is 0. |
| 2 | collapsibleThis option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false. |
| 3 | disabledThis 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. |
| 4 | eventThis 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”. |
| 5 | heightStyleThis option controls the height of the tabs widget and each panel. By default its value is “content”. |
| 6 | hideThis option specifies how to animate hiding of panel. By default its value is null. |
| 7 | showThis option specifies how to animate showing of panel. By default its value is null. |
The following section will show you a few working examples of tabs functionality.
Default Functionality
The following example demonstrates a simple example of tabs functionality, passing no parameters to the tabs() method.
<!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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result
In the above example, click on tabs to swap between content.
Use of heightStyle, collapsible, and hide
The following example demonstrates the usage of three options (a) heightStyle (b) collapsible, and (c) hide in the tabs function of JqueryUI.
<!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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result
Click the selected tab to toggle its content closed/open. You can also see the animation effect “slideUp” when the tab is closed.
Use of Event
The following example demonstrates the usage of three options event in the tabs function of JqueryUI.
<!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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result
In the above example toggle the sections open/closed with mouseover the tabs.
$ (selector, context).tabs (“action”, params) Method
The tabs (“action”, params) method allows an action on the tabs (through a JavaScript program), selecting, disabling, adding, or removing a tab. The action is specified as a string in the first argument (e.g., “add” to add a new tab). Check out the actions that can be passed, in the following table.
Syntax
$(selector, context).tabs (“action”, params);;
The following table lists the different actions that can be used with this method −
| Sr.No. | Action & Description |
|---|---|
| 1 | destroyThis action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments. |
| 2 | disableThis action disables all tabs. This method does not accept any arguments. |
| 3 | disable( index )This action disables the specified tab. Where index is the tab to be disabled. |
| 4 | enableThis action activates all the tabs. This signature does not accept any arguments. |
| 5 | enable( index )This action activates a specified tab. Where index is the tab to be enabled. |
| 6 | load( index )This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load. |
| 7 | option( optionName )This action gets the value currently associated with the specified optionName. |
| 8 | optionThis action gets an object containing key/value pairs representing the current tabs options hash. |
| 9 | 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 to be set for the option. |
| 10 | option( options )This action sets one or more options to the tabs. |
| 11 | refreshThis action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option. |
| 12 | widgetThis action returns the element serving as the tabs widget, annotated with the ui-tabs class name. |
Use of Action Disable()
Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() method.
<!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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
Here you can see all the tabs are disabled.
Use of Action Disable(index)
Now let us see an example using the actions from the above table. The following example demonstrates the use of disable(index) method.
<!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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output
In the above example, you notice that Tab 3 is disabled.
Event Management on tabs elements
In addition to the tabs (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
| Sr.No. | Event Method & Description |
|---|---|
| 1 | activate(event, ui)This event is triggered after the tab has been activated (after the completion of animation). |
| 2 | beforeActivate(event, ui)This event is triggered before a the tab has been activated. |
| 3 | beforeLoad(event, ui)This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. |
| 4 | create(event, ui)This event is triggered when tabs are created. |
| 5 | load(event, ui)This event is triggered after a remote tab has been loaded. |
Example
The following example demonstrates the event method usage in tabs widgets. This example demonstrates the use of events activate and 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>Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output −
Leave a Reply