dojo---dijit/MenuBar 编程方式和声明标记创建方式

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>

posted on 2017-01-03 11:00 Sharpest 阅读(270) 评论(0) 收藏举报