html - カスタム画像をボタンに追加する方法 (dojo 1.7)

Question

Dojo ボタンにカスタム イメージを追加する方法

画像のないボタンのサンプルコードは次のとおりです

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

Answer 1

これらの答えは近いですが、アイコンのスタイル定義には次のものが含まれている必要があります。

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

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

Answer 3

クレイグの答えに従いますが、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>