如何给按钮添加自定义图像(dojo 1.7)

iyfjxgzm  于 2022-12-16  发布在  Dojo
关注(0)|答案(4)|浏览(190)

如何向dojo按钮添加自定义图像
下面是无图像按钮的示例代码

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

yc0p9oo01#

这些答案很接近,但图标的样式定义必须包括以下内容:

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

jaxagkaj2#

你可以在你的小部件上设置一个icon类,然后用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

xbp102n0

xbp102n03#

我同意克雷格的回答,但是为了符合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>
wydwbb8l

wydwbb8l4#

我使用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;
}

相关问题