Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add custom image to a button (dojo 1.7)

Tags:

html

dojo

How do I add a custom image to a dojo button

here is the sample code for button without image

<div id="zoomin" data-dojo-type="dijit.form.Button">
    <span>zoomin</span>
</div>
like image 968
Newbie Avatar asked Jun 11 '12 20:06

Newbie


3 Answers

These answers are close, but the style definition for your icon must include the following:

.myIcon {
  background-image: url(...);
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  text-align: center;
}
like image 194
Chuck Replogle Avatar answered Nov 18 '22 02:11

Chuck Replogle


You can set an icon class on your widget and then provide the image 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

like image 32
Craig Swing Avatar answered Nov 18 '22 01:11

Craig Swing


follow Craig's answer but to conform with 1.7+ and html standards, instead use

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

Or you can decide which through a function 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>
like image 1
mschr Avatar answered Nov 18 '22 02:11

mschr