Добавление изображения в кнопку 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>