LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


selectedIndex

Gets or sets the currently selected tab by using its index.

Property Value

A Number. The default value is -1, stating that there is no tab currently selected in TabStrip.

Remarks

Whenever a new tab is added to the TabStrip, automatically becomes selected. This property value changes depending on the index of selectedTab in the list of all tabs present in the TabStrip.

Version Information

Supported in: v1.0.

Example

The following example shows how to select a tab from code using the tab index. In our example the tab at position 2 in the list will become selected. That means the third tab, because the list is indexed starting from 0.

$(document).ready(function() {

// Create an instance of TabStrip widget

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

 

// Select the third tab

$tab.tabstrip("option", "selectedIndex", 2);

});

<!DOCTYPE html>

<html>

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

    <li><span>Tab 1</span></li>

    <li><span>Tab 2</span></li>

    <li><span>Tab 3</span></li>

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

See Also