Menu Widget
Menus play a vital role in user friendly interfaces. Menu widget is quite simple to use
Basic Usage
$.domLoaded(function() {
$.get("#accord1").widget("menu");
}
HTML Template for Tabs
"menubar" class should be applied to top menus and "menu" class should be applied to all other menu items
<div id="parent1">
<div class="menubar">File
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar">Help</div>
</div>
JS
HTML
$.domLoaded( function() {
$.get("#dial").widget("dialog", {
head : {
title : "Dialog with Menus"
},
dim : { wid : 500, ht : 300},
draggable : true,
maximize : "document",
close : true
});
$.get("#parent1").widget("menu");
});
<div id="dial">
<div id="parent1">
<div class="menubar">File
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar" id="fail">Edit
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar">Help</div>
</div>
</div>
Example 2
JS
HTML
$.domLoaded( function() {
$.get("#parent1").widget("menu");
});
<div id="dial">
<div id="parent1">
<div class="menubar">File
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar">Edit
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar">View
<div class="menu">Open</div>
<div class="menu">Secondary Menu
<div class="menu">Sub Menu 1</div>
<div class="menu">Sub Menu 2</div>
</div>
<div class="menu">Exit</div>
</div>
<div class="menubar">Help</div>
</div>
</div>
