jQuery UI Tabs provides a rich set of methods to manage and manipulate Tabs.It even supports the implementation of advanced practicality mistreatment programs.The table below shows all the methods of Ajax.
| Methods |
Description |
| destroy |
Is used to remove the widget from the HTML Document. |
| enable |
Is used to enable the entire tab widget or individual tabs. |
| disable |
Is used to disable the entire tab widget or individual tabs. |
| add |
Is used to add a new tab. |
| remove |
Is used to remove a tab. |
| option |
Is used to change one or multiple tab settings. |
| load |
Is used to load contents of the tab. |
| select |
Is used to activate tab. |
| url |
Is used to alter the URL of the remote tab. |
| abort |
Is used to abort ajax requests. |
| length |
Is used to return a number of tabs in a widget. |
| rotate |
Is used to make the tab to cycle through the tabs. |
Destroying Tabs
The jQuery UI Tabs methods user can completely destroy the tab widgets by using the destroy method is as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Destroy Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs();
$("#destroyTabs").click(function() {
$("#demoTabs").tabs("destroy");
});
});
</script>
</head>
<body bgcolor="skyblue">
<div id="demoTabs">
<ul>
<li><a href="#coach">Splesson</a></li>
<li><a href="#bike">Logo</a></li>
<li><a href="#truck">Quote</a></li>
</ul>
<div id="coach"><p>Welcome To Splessons</p></div>
<div id="bike"><img src="..//splessons.png"/></div>
<div id="truck"><p>Stop Thinking Start Coding</p></div>
</div>
<br>
<button type="button" id="destroyTabs">Destroy All the tabs</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Enable and Disabling Tabs
A user can enable and disable the tabs by using the enable and disable methods. Using of enabling and disable as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Enable and Disable Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs({
disabled: [2]
});
$("#enable").click(function() {
$("#demoTabs").tabs("enable", 2);
});
$("#disable").click(function() {
$("#demoTabs").tabs("disable", 2);
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
In the above code initially diable a tab and then enable it by using tab() widget and pass the string enable and the same procedure for disabling.
Adding Removing Tabs
In jQuery UI Tab Widget user can add or remove the tabs programmatically by using the add and remove method in which add method adds the new tab to the widget and user can use it in conjuction with appendTo() method. is as shown in below image.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Add and Remove Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs();
$("#removeTabs").click(function() {
var tabIndex = parseInt($("#indexValue").val(), 10);
var tab = $( "#demoTabs" ).find(".ui-tabs-nav li:eq(" + tabIndex + ")").remove();
$("#demoTabs").tabs("refresh");
});
$("#addTabs").click(function() {
$("<li><a href='myTab.txt'>New Tab</a></li>").appendTo("#demoTabs .ui-tabs-nav");
$("#demoTabs").tabs("refresh");
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">Splessons1</a></li>
<li><a href="#bike">Splessons2</a></li>
<li><a href="#truck">Splessons3</a></li>
</ul>
<div id="coach"><img src="..//splesson.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
<br>
<label>Index No of Tab to be Removed (zero based):</label>
<input for="indexValue" id="indexValue"><p>
<button type="button" id="removeTabs">Remove!</button>
<button type="button" id="addTabs">Add a new tab!</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Setting Options
The jQuery UI Tabs option method may also be used to set values, which is often done by supply the third argument containing the new value of the options. The code below demonstrates the when the button is clicked the code gets the value of input then uses it to vary the value of selected index. The code below demonstrates the Setting Options as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Setting Options</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs();
$("#setTabs").click(function() {
$("#demoTabs").tabs("option", "active", parseInt($("#setIndex").val()));
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
<br>
<label for="setIndex">Index No of the Tab to be activated </label>
<input id="setIndex" type="text">
<button type="button2" id="setTabs">Activate Tab</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Collapsible Tabs
The jQuery UI Tabs may be converted into a hybrid between accordion and tabs using a setting of collapsible When the value of collapsible is set as true, clicking on the active tab makes it collapse like an accordion. The code below demonstrates the Collapsible Tabs as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Collapsible Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var myOptions = {
collapsible:true
};
$("#demoTabs").tabs(myOptions);
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Introduction 
Enable and Disabling Tabs
A user can enable and disable the tabs by using the enable and disable methods. Using of enabling and disable as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Enable and Disable Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs({
disabled: [2]
});
$("#enable").click(function() {
$("#demoTabs").tabs("enable", 2);
});
$("#disable").click(function() {
$("#demoTabs").tabs("disable", 2);
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
In the above code initially diable a tab and then enable it by using tab() widget and pass the string enable and the same procedure for disabling.
Adding Removing Tabs
In jQuery UI Tab Widget user can add or remove the tabs programmatically by using the add and remove method in which add method adds the new tab to the widget and user can use it in conjuction with appendTo() method. is as shown in below image.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Add and Remove Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs();
$("#removeTabs").click(function() {
var tabIndex = parseInt($("#indexValue").val(), 10);
var tab = $( "#demoTabs" ).find(".ui-tabs-nav li:eq(" + tabIndex + ")").remove();
$("#demoTabs").tabs("refresh");
});
$("#addTabs").click(function() {
$("<li><a href='myTab.txt'>New Tab</a></li>").appendTo("#demoTabs .ui-tabs-nav");
$("#demoTabs").tabs("refresh");
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">Splessons1</a></li>
<li><a href="#bike">Splessons2</a></li>
<li><a href="#truck">Splessons3</a></li>
</ul>
<div id="coach"><img src="..//splesson.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
<br>
<label>Index No of Tab to be Removed (zero based):</label>
<input for="indexValue" id="indexValue"><p>
<button type="button" id="removeTabs">Remove!</button>
<button type="button" id="addTabs">Add a new tab!</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Setting Options
The jQuery UI Tabs option method may also be used to set values, which is often done by supply the third argument containing the new value of the options. The code below demonstrates the when the button is clicked the code gets the value of input then uses it to vary the value of selected index. The code below demonstrates the Setting Options as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tab : Setting Options</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#demoTabs").tabs();
$("#setTabs").click(function() {
$("#demoTabs").tabs("option", "active", parseInt($("#setIndex").val()));
});
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
<br>
<label for="setIndex">Index No of the Tab to be activated </label>
<input id="setIndex" type="text">
<button type="button2" id="setTabs">Activate Tab</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Collapsible Tabs
The jQuery UI Tabs may be converted into a hybrid between accordion and tabs using a setting of collapsible When the value of collapsible is set as true, clicking on the active tab makes it collapse like an accordion. The code below demonstrates the Collapsible Tabs as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Collapsible Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var myOptions = {
collapsible:true
};
$("#demoTabs").tabs(myOptions);
});
</script>
</head>
<body>
<div id="demoTabs">
<ul>
<li><a href="#coach">jQuery</a></li>
<li><a href="#bike">jQuery Mobile</a></li>
<li><a href="#truck">jQuery UI</a></li>
</ul>
<div id="coach"><img src="jquery.png"/></div>
<div id="bike"><img src="jquery_mobile.png"/></div>
<div id="truck"><img src="jquery_UI.png"/></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
