以声明方式创建 dojo 按钮答案

【问题标题】：Creating dojo button declaritively以声明方式创建 dojo 按钮
【发布时间】：2017-02-25 22:55:13
【问题描述】：

我正在尝试以声明方式而不是以编程方式制作 dojo 按钮。但是，我似乎无法让 data-dojo-props iconClass 属性正常工作。

<head>
    <meta charset=utf-8" />
    <script src="dojo/dojo.js" data-dojo-config="async:true"></script>
    <script src="scripts/dojoMain.js"></script>
</head>
<body>
<p id="picForm" name="picForm" action="#">
    <button data-dojo-type="dijit/form/Button" data-dojo-id="hide">   </button>
    <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon'" type="button"></button>
</p>

我已经正确链接了 dojo.js，因为我的第一个问题是拼写数字而不是 dijit...但是，现在尝试 data-dojo-props="iconClass:'dijitEditorIcon'" 时它似乎不起作用。

任何帮助将不胜感激，谢谢！

编辑：刚刚注意到元标记中缺少右引号，但是问题仍然存在。

【问题讨论】：

标签： javascript css dojo dijit.form

【解决方案1】：

首先您错过了通过示例 claro.css 引用 dojo css 主题文件，不要忘记将 class="claro" 附加到您的正文标签。

第二点也是你错过了一个引用 icon 的类，注意 dojo 使用 sprites css ，dijitEditorIcon 引用图像 url 背景，你必须指定第二个类引用最后在图片背景中的位置iconClass:'dijitEditorIcon dijitEditorIconCut'

您可以在此处找到 dijitEditorIcon IconClass names 的图标类名称

在工作的 sn-p 下方：

require(["dojo/parser"],function(parser){
  parser.parse();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <p id="picForm" name="picForm" action="#">
      <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitEditorIcon dijitCheckBoxIcon'" data-dojo-id="hide"> </button>
      <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'" type="button"></button>
  </p>
</body>

参考这里了解更多可用主题 => Link

【讨论】：

非常感谢！现在就像一个魅力！