Advanced User Interface Controls and Components
Determines whether a tab can be selected while mouse cursor hovers over its header.
A Boolean value. The default is false, stating that tabs will not become selected when mouse cursor hovers over their header.
When tab is hovered, tabHover event is thrown. Additionally, when this property is set to true, it triggers the beforeSelect and afterSelect events.
Supported in: v1.0.
In this example the TabStrip widget has hoverSelection set to true. This enables whenever a mouse cursor is hovering over tab space longer than 500ms, to change the current selection to the tab that is hovered.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip({
hoverSelection: true
});
});
<!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;
}