Advanced User Interface Controls and Components
Occurs before tab becomes selected.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the tab |
This event can be handled by binding the 'beforeselect' event to the TabStrip widget object.
Supported in: v1.0.
In this example we are showing how to create a handle to the beforeselect event in TabStrip widget.
By handling this event you can prevent tab from selection depending on some custom conditions. In this example second tab in TabStrip widget will never become selected.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip();
$tab.on({
"beforeselect": function(e){
// Get a list of visible tabs present in TabStrip widget
var currentList = $tab.tabstrip('getCurrentList');
// Get the index of the tab that is going to become selected
var tabIndex = $.inArray(e.object, currentList);
// If tab index equals 1, abort selection
if (tabIndex === 1)
return false;
});
});
<!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;
}
A sample which demonstrates how to handle different events in TabStrip widget.