LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Dynamically Create New Tabs in jQuery

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 is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps





How to Add a New Tab to TabStrip

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());

How to Remove a Tab from TabStrip

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.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.