以声明方式创建 dojo 按钮

Question

我正在尝试以声明方式而非编程方式制作 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'" 它似乎不起作用。

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

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

Answer 1

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

第二点也是你漏了一个class指代图标，注意dojo使用精灵css，dijitEditorIcon指代图像 url 背景，您必须指定第二个 class，它指的是最后一个在图像背景 iconClass:'dijitEditorIcon dijitEditorIconCut'

中的位置

您可以在这里找到图标 class dijitEditorIcon 的名称 IconClass names

下面是一个工作片段：

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

以声明方式创建 dojo 按钮

Creating dojo button declaritively

javascript

css

dojo

dijit.form