Advanced User Interface Controls and Components
Occurs after all items are removed from the Menu or from specified parent item.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the parent item from which items are removed |
This event can be handled by binding the 'clear' event to the Menu widget object.
If all items are removed from the Menu, parent object within the event data is set to null.
Supported in: v1.0.
In this example we are showing how to handle clear event in Menu widget. This event is fired only when clearItems method is called.
$(document).ready(function() {
// Create an instance of Menu widget
var $bar = $('#menu').menu();
var clearAllItems = function(){
$bar.menu("clearItems");
$tree.on({
"clear": function(e){
console.log("clear event was fired, all items are removed");
});
});
<!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>
<button type="button" onclick="clearAllItems()" />Clear</button>
<div id="menu" class="widget">
<ul>
<li><span>MenuItem1</span></li>
<li><span>MenuItem2</span>
<ul>
<li><span>MenuItem21</span></li>
<li>><span>MenuItem22</span></li>
<li ><span>MenuItem23</span></li>
<ul>
<li><span>MenuItem231</span></li>
<li ><span>MenuItem232</span>
<ul>
<li><span>MenuItem2321</span></li>
<li><span>MenuItem2322</span></li>
</ul>
</li>
<li><span>MenuItem233</span></li>
</ul>
</li>
<li><span>MenuItem24</span></li>
</ul>
</li>
<li ><span>MenuItem3</span></li>
<ul>
<li><span>MenuItem31</span></li>
<li><span>MenuItem32</span></li>
<li><span>MenuItem33</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
.widget
{
width: 600px;
height: 0;
}
A sample which demonstrates how to handle different events in Menu widget.