<html> <head> <title>Dojo Menu/MenuBar Programatic Test</title> <script type="text/javascript"> var djConfig = { //parseWidgets: false,// appears to make no difference, alas isDebug: true }; </script> <script language="JavaScript" src="../../dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.Menu2"); dojo.hostenv.writeIncludes(); </script> <script> // Create a menu bar w/sub menus by simple static calls function bar(){ var menubar = dojo.widget.createWidget("MenuBar2", {id: "mbar"}); document.body.appendChild(menubar.domNode); var menu1 = dojo.widget.createWidget("PopupMenu2", {id: "menu1"}); menu1.addChild(dojo.widget.createWidget("MenuItem2", {caption: "MENU 1"})); var menu2 = dojo.widget.createWidget("PopupMenu2", {id: "menu2"}); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Page Info"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Set Permissions"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "List All Pages"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "List My Pages"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "List Recent Changes"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "List Recent Comments"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Save Page"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Save {{NoWiki}}Space{{/NoWiki}}"})); menu2.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Load {{NoWiki}}Space{{/NoWiki}}"})); var menu3 = dojo.widget.createWidget("PopupMenu2", {id: "menu3"}); menu3.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Edit Page"})); menu3.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Copy Page"})); menu3.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Rename Page"})); menu3.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Delete Page"})); var menu4 = dojo.widget.createWidget("PopupMenu2", {id: "menu4"}); menu4.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Show All Notes"})); menu4.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Hide All Notes"})); menu4.addChild(dojo.widget.createWidget("MenuSeparator2")); menu4.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Lists"})); menu4.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Commands"})); menu4.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Bookmarks"})); var menu5 = dojo.widget.createWidget("PopupMenu2", {id: "menu5"}); menu5.addChild(dojo.widget.createWidget("MenuItem2", {caption: "DojoTest"})); menu5.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Home Page"})); menu5.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Yadda Yadda"})); var menu6 = dojo.widget.createWidget("PopupMenu2", {id: "menu6"}); menu6.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Change Settings"})); menu6.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Logout"})); menu6.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Manage Users"})); menu6.addChild(dojo.widget.createWidget("MenuItem2", {caption: "Refresh QED Palette"})); var menu7 = dojo.widget.createWidget("PopupMenu2", {id: "menu7"}); menu7.addChild(dojo.widget.createWidget("MenuItem2", {caption: "About"})); menu7.addChild(dojo.widget.createWidget("MenuItem2", {caption: "User Manual"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "Help", submenuId: "menu7"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "User", submenuId: "menu6"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "History", submenuId: "menu5"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "View", submenuId: "menu4"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "Edit", submenuId: "menu3"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "Page", submenuId: "menu2"})); menubar.addChild(dojo.widget.createWidget("MenuBarItem2", {caption: "Home", submenuId: "menu1"})); } // This is a JSON structure representing a menu var myMenu = [ { caption: "File", submenu: [ { caption: "Save", iconSrc: "images/tools.gif" }, { caption: "Recent", iconSrc: "images/plus.gif", submenu: [ { caption: "foo.txt", iconSrc: "images/graph.gif", onClick: function(){ alert("opening foo"); } }, { caption: "bar.txt", iconSrc: "images/check.gif", onClick: function(){ alert("opening bar"); } }, { caption: "doh.txt", iconSrc: "images/graph.gif", onClick: function(){ alert("opening doh"); } } ] } ] }, { caption: "Edit", submenu: [ { caption: "Cut", accelKey: "Ctrl+X", iconSrc: "../../src/widget/templates/buttons/cut.gif" }, { caption: "Copy", accelKey: "Ctrl+P", iconSrc: "../../src/widget/templates/buttons/copy.gif" }, { caption: "Paste", accelKey: "Ctrl+V", iconSrc: "../../src/widget/templates/buttons/paste.gif" } ] }, { caption: "Help", onClick: function(){ alert("Help me!"); } } ]; function makeMenu(items, isTop){ var menu2 = dojo.widget.createWidget("PopupMenu2", {contextMenuForWindow: isTop}); dojo.lang.forEach(items, function(itemJson){ // if submenu is specified, create the submenu and then make submenuId point to it if(itemJson.submenu){ var submenu = makeMenu(itemJson.submenu, false); itemJson.submenuId = submenu.widgetId; } var item = dojo.widget.createWidget("MenuItem2", itemJson); menu2.addChild(item); }); return menu2; } // Make a popup menu function menu(){ makeMenu(myMenu, true); dojo.debug("Menu created, right-click to see it (ctrl-click on opera)"); } </script> </head> <body> <h1>Test of programatic creation of menu and menubar</h1> <button onClick="bar();">Create menu bar</button> <button onClick="menu();">Create context menu</button> </body> </html>