TabStrip is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 28 July 2014
In most cases you will add tabs during design time, using HTML to create a TabStrip with some tabs in it. However there may be cases when you may need to create new tabs while web page is already loaded, in other words you may need to create tabs dynamically. In following sections we will show you how to add and remove tabs in TabStrip widget for jQuery.
TabStrip widget has several methods which you can use to add new tabs on demand from javascript code. If you want to add a new tab to the end of list of tabs in TabStrip, then use the addTab method. In cases when you want to insert a tab to a specific position, use the insert method.
Related: Click on Tab Header to Open a New Tab
At first we need to create a tab object which for simplicity in our example will have only its text set to a custom value. For this purpose is best to create a function which will create a new tab object and return it. We will call this function whenever we want to create a new tab. Let’s see how this looks like in javascript:
$(document).ready(function() {
var $tab = $('#tabstrip').tabstrip();
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="css/integralui.tabstrip.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.tabstrip.min.js"></script>
</head>
<body>
<div id="tabstrip" class="widget"></div>
</body>
</html>
<style type="text/css">
.widget
{
width: 300px;
height: 300px;
}
</style>
In cases when we don’t know the position at which we want to insert our new tab, but we know that we want to insert it after or before a specific tab, the best is to use the insertTabAfter method or insertTabBefore method. For example the following code will insert a new tab before and after currently selected tab:
// Get the current count of present tabs
// Use this function to modify the tab title
var getTabCount = function(){
return $tab.tabstrip("getList").length;
}
// Get the tab that is currently selected
var getCurrentSelection = function(){
return $tab.tabstrip("option", "selectedTab");
}
// Insert a new tab before currently selected tab
$tab.tabstrip("insertTabBefore", createTab("Tab" + getTabCount()), getCurrentSelection());
// Insert a new tab after currently selected tab
$tab.tabstrip("insertTabAfter", createTab("Tab" + getTabCount()), getCurrentSelection());
Now that we have some tabs created and present in the TabStrip, how we can remove them? There are several different ways to remove tabs from TabStrip widget. By default TabStrip has a close button placed at the right side of the tab strip, but its not visible. To make it visible we need to set the showCloseButton property set to true:
$tab.tabstrip("option", "showCloseButton", true);
Whenever this button is clicked the currently selected tab will be removed from the tab strip.
Related: How to Add a Close Button in Each Tab
However this only works for selected tab, if we want to remove a specific tab we can use the built-in removeTab method or removeTabAt method. Here is an example:
// Deletes the currently selected tab
$tab.tabstrip("removeTab", getCurrentSelection());
// Deletes the tab located at position 1
$tab.tabstrip("removeTabAt", 1);
Finally if we want to delete all tabs from the tab strip, we can use the clearTabs method:
$tab.tabstrip("clearTabs");
When tab is added to or removed from the TabStrip, a corresponding event is fired like: tabadding, tabadded, tabremoving or tabremoved. By adding handlers to these events you can further customize these operations and apply specific conditions which can prevent some tabs to be removed or add to the tab strip. You can find more information about these events in online help.