Demo of widget method for JQuery UI

  • Education
  • Job
  • Fruits
    • Mango
    • Banana
    • Orange
    • Apple
  • Vehicle
  • Games
    • Football
    • Tennis
      • Lawn Tennis
      • Table Tennis
    • Golf
    • Badminton
  • Dresses

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


<ul id='my_menu'>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>

<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>


$(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>")"refresh")