jQueryUI - Day 11 (Tabs)

Pankaj Kumar Choudhary
Jan 19, 2016

7.5k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/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>
$(document).ready(function ()
{
$("#tabs-1").tabs();
});
</script>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px;
}
#tabs-1 {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="div1"> <span>************Tabs*************</span>
<div id="tabs-1">
<ul>
<li>
<a href="#tabs-2">Delhi</a>
</li>
<li>
<a href="#tabs-3">Mumbai</a>
</li>
<li>
<a href="#tabs-4">Jaipur</a>
</li>
<li>
<a href="#tabs-5">Amritsar</a>
</li>
</ul>
<div id="tabs-2">
<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>
</div>
<div id="tabs-3">
<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>
</div>
<div id="tabs-4">
<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>
</div>
<div id="tabs-5">
<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>
</div>
</div>
</div>
</body>
</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:

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/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>
$(document).ready(function ()
{
varab = $("#tabs-1").tabs(
{
active: 2,
disabled: [0],
event: "mouseover",
heightStyle: "auto",
hide:
{
effect: "explode",
duration: 1000,
delay: 500
},
show:
{
effect: "slideDown",
duration: 800,
delay: 500
}
})
});
</script>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 800px;
text-align: center;
margin-left: 150px;
}
#tabs-1 {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="div1"> <span>************Tabs*************</span>
<div id="tabs-1">
<ul>
<li>
<a href="#tabs-2">Delhi</a>
</li>
<li>
<a href="#tabs-3">Mumbai</a>
</li>
<li>
<a href="#tabs-4">Jaipur</a>
</li>
<li>
<a href="#tabs-5">Amritsar</a>
</li>
</ul>
<div id="tabs-2">
<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>
</div>
<div id="tabs-3">
<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>
</div>
<div id="tabs-4">
<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>
</div>
<div id="tabs-5">
<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>
</div>
</div>
</div>
</body>
</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

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/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>
$(document).ready(function ()
{
varab = $("#tabs-1").tabs(
{
active: 2,
disabled: [0],
event: "mouseover",
heightStyle: "auto",
hide:
{
effect: "explode",
duration: 1000,
delay: 500
},
show:
{
effect: "slideDown",
duration: 800,
delay: 500
},
activate: function (event, ui)
{
$("#txt").append("Activated ")
},
create: function (event, ui)
{
$("#txt").append("Created ")
},
beforeActivate: function (event, ui)
{
$("#txt").append("Before Activate ")
},
beforeLoad: function (event, ui)
{
$("#txt").append("Before Load ")
}
})
});
</script>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 800px;
text-align: center;
margin-left: 150px;
}
#tabs-1 {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="div1"> <span>************Tabs*************</span>
<div id="tabs-1">
<ul>
<li>
<a href="#tabs-2">Delhi</a>
</li>
<li>
<a href="#tabs-3">Mumbai</a>
</li>
<li>
<a href="#tabs-4">Jaipur</a>
</li>
<li>
<a href="#tabs-5">Amritsar</a>
</li>
</ul>
<div id="tabs-2">
<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>
</div>
<div id="tabs-3">
<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>
</div>
<div id="tabs-4">
<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>
</div>
<div id="tabs-5">
<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>
</div>
</div>
<div id="txt">
</div>
</div>
</body>
</html>