Demo of widget method for JQuery UI
Add Item
We created one object
menu_object by using widget method, using this object we are adding one item to the menu.
We used
select method to display the item selected by user.
Check
refresh method to know how to add items to the menu
HTML
<ul id='my_menu'>
<li><div>Education</div></li>
<li><div>Job</div></li>
<li><div>Fruits</div>
<ul>
<li><div>Mango</div></li>
<li><div>Banana</div></li>
<li><div>Orange</div></li>
<li><div>Apple</div></li>
</ul>
</li>
<li><div>Vehicle</div></li>
<li><div>Games</div>
<ul>
<li><div>Football</div></li>
<li><div>Tennis</div>
<ul>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>
</ul>
</li>
<li><div>Golf</div></li>
<li><div>Badminton</div></li>
</ul></li>
<li><div>Dresses</div></li>
</ul>
<input type='text' class='form-control' id='t1' name='t1' placeholder='Item Name' >
<button type='button' class='btn btn-succcess' id='b1'>Add Item</button>
jquery
<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
select: function(event, ui) {
$('#d1').html( " <b>SELECT Method Item : </b>" +ui.item.text() );
}
});
///////////////
var menu_object=$("#my_menu").menu("widget");
/////////
$("#b1").click(function() {
var str=$('#t1').val();
menu_object.append("<li><div>" + str + "</div></li>")
menu_object.menu("refresh")
})
///////////
})</script>