Advanced User Interface Controls and Components
Occurs when tab header is clicked in TabStrip.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the tab and mousePos objects |
This event can be handled by binding the 'tabclick' event to the TabStrip widget object.
The mousePos object associated with this event holds coordinates of mouse position relative to the parent page.
Supported in: v1.0.
In this example we are showing how to handle the tabclick event in TabStrip widget. Whenever a tab header is clicked, a pop-up message will appear stating which tab is clicked.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $bar = $('#tabstrip').tabstrip();
// Create a handler to the tabclick event
$bar.on({
"tabclick": function(e){
alert("tabclick event was fired when header of " + e.object.text + " is clicked");
});
});
<!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.