Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertTabAt(tab, index)

Inserts a new tab at specified position in TabStrip widget.


tabObjectThe tab to insert to the collection
indexIntegerThe indexed location within the collection to insert the tab

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.


In this example we are showing how to use insertTabAt method to insert a new tab as a child at position 2 in tab collection of TabStrip widget. Although the position is set to 2, if there are no tabs present in TabStrip, the new tab will be added as a first tab.

$(document).ready(function() {

// Create an instance of TabStrip widget

var $tab = $('#tabstrip').tabstrip();


var getTabCount = function(){

return $tab.tabstrip("getList").length + 1;



var createNewTab = function(){

return { text: "Tab" + getTabCount() };



$tab.tabstrip("insertTabAt", createNewTab(), 2);


<!DOCTYPE html>



<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>



<div id="tabstrip" class="widget"></div>





width: 300px;

height: 300px;



See Also