Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertTabBefore(tab, refTab)

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


tabObjectThe tab to add to the collection
refTab ObjectA reference tab before 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 insertTabBefore method to place a new tab before 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("insertTabBefore", 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