Advanced User Interface Controls and Components
Occurs when tab header is clicked using right mouse button 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 'tabrightclick' 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 tabrightclick event in TabStrip widget. Whenever a tab header is clicked using the right mouse button, a pop-up message will appear stating which tab is clicked.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip();
// Create a handler to the tabrightclick event
$tab.on({
"tabrightclick": function(e){
alert("tabrightclick event was fired when header of " + e.object.text + " is clicked using the right mouse button.");
});
});
<!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.