Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertTabAfter(tab, refTab)

Inserts a new tab at position after specified tab in TabStrip widget.


tabObjectThe tab to insert to the collection
refTab ObjectA reference tab after which the newly added tab will be positioned

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.


In this example we are showing how to use insertTabAfter method to place a new tab after currently selected tab used as a reference 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() };



var getCurrentSelection = function(){

return $tab.tabstrip("option", "selectedTab");



$tab.tabstrip("insertTabAfter", createNewTab(), getCurrentSelection());


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