Come aggiungere un'immagine personalizzata a un pulsante (dojo 1.7)

Question

Come faccio ad aggiungere un'immagine personalizzata a un pulsante dojo

Ecco il codice di esempio per il tasto senza immagine

<div id="zoomin" data-dojo-type="dijit.form.Button"> 
    <span>zoomin</span> 
</div> 

Answer 1

È possibile impostare un icona class sul tuo widget e quindi fornire l'immagine in css.

<div id="zoomin" data-dojo-type="dijit.form.Button" iconClass="myIcon"> 
    <span>zoomin</span> 
</div> 

.myIcon { 
    background-image: url(...); 
} 

http://dojotoolkit.org/reference-guide/1.7/dijit/form/Button.html#change-the-icon

Answer 2

seguire la risposta di Craig, ma per conformarsi agli standard 1.7+ e html, invece usare

<div id="zoomin" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'myIcon'"> 
    <span>zoomin</span> 
</div> 

Oppure si può decidere quale attraverso una funzione di override

<div id="zoomin" data-dojo-type="dijit.form.Button"> 
    <script type="dojo/method" data-dojo-event="getIconClass"> 
     var regular = this.inherited(arguments); 
     // this evaluation will allways be true, but here for sake of argument 
     return (this.declaredClass == 'dijit.form.Button' ? "myButtonIcon" : regular); 
    </script> 
    <span>zoomin</span> 
</div> 

Answer 3

Queste risposte sono vicine, ma la definizione di stile per l'icona deve includere il seguente:

.myIcon { 
    background-image: url(...); 
    background-repeat: no-repeat; 
    width: 16px; 
    height: 16px; 
    text-align: center; 
} 

Answer 4

Io uso dojo 1.10 e lavorare con l'utilizzo di background-repeat:round

<div id="zoomin" data-dojo-type="dijit/form/Button" iconClass="myIcon"> 
<span>zoomin</span> 

.myIcon { 
background-image: url(...); 
background-repeat: round; 
width: 18px; 
height: 18px; 
text-align: center; 
}