如何在一个按钮上添加自定义图片（dojo 1.7）

Question

如何为Dojo按钮添加自定义图片？

以下是没有图片的按钮的示例代码。

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

- Newbie

Answer 1

这些答案接近正确，但是您的图标样式定义必须包括以下内容：

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

- Chuck Replogle

Answer 2

你可以在小部件上设置一个图标类，然后在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

- Craig Swing

---

我还需要添加width: 16px;和height: 16px;以使其正常工作。 - Richard Ayotte

Answer 3

请遵循Craig的回答，但为了符合1.7+和HTML标准，请改用以下代码：

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

或者您可以通过函数重写来决定

<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>

- mschr

Answer 4

我使用的是Dojo 1.10，并且正在使用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;
}

- Muhammet Can TONBUL