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

Posted 2023-02-16

【中文标题】如何将自定义图像添加到按钮 (dojo 1.7)

【英文标题】：How to add custom image to a button (dojo 1.7)

【发布时间】：2012-06-11 20:05:52

【问题描述】：

如何将自定义图像添加到 dojo 按钮

这里是无图片按钮的示例代码

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

【参考方案1】：

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

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

【参考方案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

【讨论】：

我还需要添加 width: 16px; and height: 16px; 才能使其正常工作。

【参考方案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>

【参考方案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;