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中定义的图标

要添加自己的＆＃34;图标＆＃34;，请检查以下CSS：

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

基本上，您在CSS中使用背景图像创建一个类，然后通过＆＃34; iconClass＆＃34;将该样式应用于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>

将图像添加到dojo按钮

2 个答案: