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