1.编程方式
1 <!DOCTYPE html> 2 <html > 3 <head> 4 5 <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css"> 6 7 <script>dojoConfig = {async: true}</script> 8 <script src='../_static/js/dojo/dojo.js'></script> 9 10 <script> 11 require([ 12 "dijit/MenuBar", 13 "dijit/PopupMenuBarItem", 14 "dijit/Menu", 15 "dijit/MenuItem", 16 "dijit/DropDownMenu", 17 "dojo/domReady!" 18 ], function(MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu){ 19 var pMenuBar = new MenuBar({}); 20 21 var pSubMenu = new DropDownMenu({}); 22 pSubMenu.addChild(new MenuItem({ 23 label: "File item #1" 24 })); 25 pSubMenu.addChild(new MenuItem({ 26 label: "File item #2" 27 })); 28 pMenuBar.addChild(new PopupMenuBarItem({ 29 label: "File", 30 popup: pSubMenu 31 })); 32 33 var pSubMenu2 = new DropDownMenu({}); 34 pSubMenu2.addChild(new MenuItem({ 35 label: "Cut", 36 iconClass: "dijitEditorIcon dijitEditorIconCut" 37 })); 38 pSubMenu2.addChild(new MenuItem({ 39 label: "Copy", 40 iconClass: "dijitEditorIcon dijitEditorIconCopy" 41 })); 42 pSubMenu2.addChild(new MenuItem({ 43 label: "Paste", 44 iconClass: "dijitEditorIcon dijitEditorIconPaste" 45 })); 46 pMenuBar.addChild(new PopupMenuBarItem({ 47 label: "Edit", 48 popup: pSubMenu2 49 })); 50 51 pMenuBar.placeAt("wrapper"); 52 pMenuBar.startup(); 53 }); 54 </script> 55 </head> 56 <body class="claro"> 57 <div id="wrapper"></div> 58 </body> 59 </html>
2.声明标记
1 <!DOCTYPE html> 2 <html > 3 <head> 4 5 <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css"> 6 7 <script>dojoConfig = {async: true, parseOnLoad: true}</script> 8 <script src='../_static/js/dojo/dojo.js'></script> 9 10 <script> 11 require(["dojo/parser", "dijit/MenuBar", "dijit/MenuBarItem", "dijit/PopupMenuBarItem", 12 "dijit/DropDownMenu", "dijit/MenuItem"]); 13 </script> 14 </head> 15 <body class="claro"> 16 <div data-dojo-type="dijit/MenuBar" id="navMenu"> 17 <div data-dojo-type="dijit/PopupMenuBarItem"> 18 <span>File</span> 19 <div data-dojo-type="dijit/DropDownMenu" id="fileMenu"> 20 <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('file 1');}">File #1</div> 21 <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('file 2');}">File #2</div> 22 </div> 23 </div> 24 <div data-dojo-type="dijit/PopupMenuBarItem"> 25 <span>Edit</span> 26 <div data-dojo-type="dijit/DropDownMenu" id="editMenu"> 27 <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', 28 onClick:function(){alert('cut!')}">Cut</div> 29 <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', 30 onClick:function(){alert('copy!')}">Copy</div> 31 <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', 32 onClick:function(){alert('paste!')}">Paste</div> 33 </div> 34 </div> 35 <div data-dojo-type="dijit/MenuBarItem"> 36 Save 37 </div> 38 </div> 39 </body> 40 </html>
