将图像添加到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”属性按钮。

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>