Dojo示例有效,但我没有

时间:2016-03-05 21:17:38

标签: javascript dojo menubar

所以我正在练习,当我点击它时它会运行,但是当我将它复制并粘贴到我自己的文字处理器(Atom)并在标签中运行时,它只是空白     

require([
"dijit/MenuBar",
"dijit/PopupMenuBarItem",
"dijit/Menu",
"dijit/MenuItem",
"dijit/DropDownMenu",
"dojo/domReady!"
], function(MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu){
var pMenuBar = new MenuBar({});
var pSubMenu = new DropDownMenu({});
pSubMenu.addChild(new MenuItem({
    label: "File item #1"
}));
pSubMenu.addChild(new MenuItem({
    label: "File item #2"
}));
pMenuBar.addChild(new PopupMenuBarItem({
    label: "File",
    popup: pSubMenu
}));
var pSubMenu2 = new DropDownMenu({});
pSubMenu2.addChild(new MenuItem({
    label: "Cut",
    iconClass: "dijitEditorIcon dijitEditorIconCut"
}));
pSubMenu2.addChild(new MenuItem({
    label: "Copy",
    iconClass: "dijitEditorIcon dijitEditorIconCopy"
}));
pSubMenu2.addChild(new MenuItem({
    label: "Paste",
    iconClass: "dijitEditorIcon dijitEditorIconPaste"
}));
pMenuBar.addChild(new PopupMenuBarItem({
    label: "Edit",
    popup: pSubMenu2
}));
pMenuBar.placeAt("wrapper");
pMenuBar.startup();
});
</script>
<div id="wrapper"></div>

反斜杠是一个句号没有问题。

1 个答案:

答案 0 :(得分:0)

要实际获得可运行的内容,您需要的不仅仅是问题中发布的代码段。至少你需要加载Dojo加载器(dojo.js)或等效的AMD加载器 - require函数的来源。由于代码使用Dijit创建菜单,您还需要加载基本Dojo样式表和Dijit主题(否则菜单看起来会非常糟糕)。

Dojo website有很多教程。 Hello Dojo!是一个很好的入门方式。

&#13;
&#13;
<html>

<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async:true"></script>
  <script>
    require([
      "dijit/MenuBar",
      "dijit/PopupMenuBarItem",
      "dijit/Menu",
      "dijit/MenuItem",
      "dijit/DropDownMenu",
      "dojo/domReady!"
    ], function(MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu) {
      var pMenuBar = new MenuBar({});
      var pSubMenu = new DropDownMenu({});
      pSubMenu.addChild(new MenuItem({
        label: "File item #1"
      }));
      pSubMenu.addChild(new MenuItem({
        label: "File item #2"
      }));
      pMenuBar.addChild(new PopupMenuBarItem({
        label: "File",
        popup: pSubMenu
      }));
      var pSubMenu2 = new DropDownMenu({});
      pSubMenu2.addChild(new MenuItem({
        label: "Cut",
        iconClass: "dijitEditorIcon dijitEditorIconCut"
      }));
      pSubMenu2.addChild(new MenuItem({
        label: "Copy",
        iconClass: "dijitEditorIcon dijitEditorIconCopy"
      }));
      pSubMenu2.addChild(new MenuItem({
        label: "Paste",
        iconClass: "dijitEditorIcon dijitEditorIconPaste"
      }));
      pMenuBar.addChild(new PopupMenuBarItem({
        label: "Edit",
        popup: pSubMenu2
      }));
      pMenuBar.placeAt("wrapper");
      pMenuBar.startup();
    });
  </script>
</head>

<body class="claro">
  <div id="wrapper"></div>
</body>

</html>
&#13;
&#13;
&#13;