Advanced User Interface Controls and Components
Determines whether a group can be selected while mouse cursor hovers over its header.
A Boolean value. The default is false, stating that groups will not become selected when mouse cursor hovers over their header.
When group is hovered, groupHover 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 Accordion widget has hoverSelection set to true. This enables whenever a mouse cursor is hovering over group space longer than 500ms, to change the current selection to the group that is hovered.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion({
hoverSelection: true
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.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.accordion.min.js"></script>
</head>
<body>
<div id="accordion" class="widget">
<h3><span>Group 1</span></h3>
<div></div>
<h3><span>Group 2</span></h3>
<div></div>
<h3><span>Group 3</span></h3>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}