2017-02-25 6 views
2

Ich versuche, Dojo-Schaltflächen deklarativ statt programmgesteuert zu machen. Ich kann jedoch nicht scheinen, dass das data-dojo-props iconClass Attribut richtig funktioniert.Dojo-Schaltfläche deklarativ erstellen

<head> 
    <meta charset=utf-8" /> 
    <script src="dojo/dojo.js" data-dojo-config="async:true"></script> 
    <script src="scripts/dojoMain.js"></script> 
</head> 
<body> 
<p id="picForm" name="picForm" action="#"> 
    <button data-dojo-type="dijit/form/Button" data-dojo-id="hide"> </button> 
    <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon'" type="button"></button> 
</p> 

Ich habe dojo.js korrekt als mein erstes Problem verbunden war Rechtschreibung einstelligen statt dijit ... aber jetzt, wenn man versucht, die data-dojo-props="iconClass:'dijitEditorIcon'" es nicht zu funktionieren scheint.

Jede Hilfe wäre willkommen, danke!

EDIT: Gerade bemerkte das Fehlen von schließenden Zitaten im Meta-Tag, jedoch besteht das Problem weiter.

Antwort

1

Erste Sie verpasst mit gutem Beispiel ein Dojo CSS-Design-Datei zu verweisen claro.css, vergessen Sie nicht class="claro", um Ihren Körper-Tag anzuhängen.

Zweiter Punkt ist auch eine Klasse verpasst, die auf das Icon verweisen, beachten Sie, dass die Verwendung von Sprites CSS Dojo finden dijitEditorIcon auf Bild-URL Hintergrund und Sie müssen eine zweite Klasse angeben, die in den auf die Postion dieses letzten bezieht sich Hintergrundbilder iconClass:'dijitEditorIcon dijitEditorIconCut'

Sie können für dijitEditorIcon IconClass names

unten Arbeits Schnipsel hier icon Klassennamen finden:

require(["dojo/parser"],function(parser){ 
 
    parser.parse(); 
 
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/> 
 
<body class="claro"> 
 
    <p id="picForm" name="picForm" action="#"> 
 
     <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitEditorIcon dijitCheckBoxIcon'" data-dojo-id="hide"> </button> 
 
     <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'" type="button"></button> 
 
    </p> 
 
</body>

dazu finden Sie für mehr Verständnis über die verfügbaren Themen =>Link

+0

Vielen Dank! Funktioniert jetzt wie ein Zauber! – Mystified

+1

ab +1, gern geschehen :) –

Verwandte Themen