添加一个图像到一个dojo按钮

Question

我有一个要求，添加一个图像到dojo按钮，而不是添加文本。

有谁能指点一下吗?

Answer 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按钮

Answer 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>