將圖像添加到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>