我如何自定义图像添加到道场按钮如何自定义图像添加到按钮(道场1.7)
这里是按钮的代码示例没有图像
<div id="zoomin" data-dojo-type="dijit.form.Button">
<span>zoomin</span>
</div>
我如何自定义图像添加到道场按钮如何自定义图像添加到按钮(道场1.7)
这里是按钮的代码示例没有图像
<div id="zoomin" data-dojo-type="dijit.form.Button">
<span>zoomin</span>
</div>
您可以设置一个图标类,然后在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的答案,但有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>
这些答案很接近,但图标的样式定义必须包含以下内容:
.myIcon {
background-image: url(...);
background-repeat: no-repeat;
width: 16px;
height: 16px;
text-align: center;
}
我使用道场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;
}
我还需要添加'宽度:16px的;和高度:16px;'让这个工作。 –