将图像添加到 dojo 按钮答案

【问题标题】：Adding an Image to a dojo button将图像添加到 dojo 按钮
【发布时间】：2015-06-08 07:22:33
【问题描述】：

我需要将图像添加到 dojo 按钮而不是添加文本。

谁能指导一下？

【问题讨论】：

【解决方案1】：

这是从 dojo 工具包站点上的教程中提取的示例。它会创建一个带有新任务图标且没有文本的按钮。

<script>
            require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
                var button2 = new Button({
                    iconClass: "dijitEditorIcon",
                    showLabel: false,
                    label: "Click Me!", // analogous to title when showLabel is false
                    onClick: function(){ console.log("Second button was clicked!"); }
                }, "btn2");

                button2.startup();
            });
        </script>

您感兴趣的位是 showLabel: false 隐藏文本，iconClass: "dijitEditorIcon" 显示在 css 中定义的图标

为了添加您自己的“图标”，请检查以下 CSS：

.dijitEditorIcon {
  background-image: url('images/editorIconsEnabled.png');
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  text-align: center;
}

基本上，您在 CSS 中创建一个带有背景图像的类，然后通过“iconClass”属性将该样式应用于您的 dojo 按钮。

【讨论】：

我想.dijitEditorIcon 应该是.dijitIconNewTask
@g00glen00b 如果您想要一个复制+粘贴的工作示例，是的。我已经更新了答案

【解决方案2】：

如果我可以补充，您可以以声明方式使用它（这些示例使用 dijit 的默认图标）：

    <button id="insertNewItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconNewTask'" type="button"> Insert </button>
    <button id="updateSelectedItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconEdit'" type="button"> Update </button>
    <button id="deleteSelectedItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconDelete'" type="button"> Delete </button>

【讨论】：