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


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>