2012-04-10 16 views
0

Wie einige Bilder am ▼ Zeichen dijit.form.ComboBox oder dijit.form.FilteringSelectAnpassen eines ComboBox Dojo

und das Bild bewegt sich in, wenn die Maus hinzufügen/ersetzen wechseln und ausziehen .

Und wie Popup-bg-Farbe der ComboBox ändern.

Like this web site

(ich brauche wie das Original von dieser Seite zu kopieren. Aber diese Seite ein eigenes Widget verwenden, dann weiß ich nicht, wie die Quelle zu erhalten.)

Wenn jemand weiß, wie man fertigen Sie das so an, bitte unterrichten Sie mich. Vielen Dank.

Antwort

3

Das Aussehen von Dojo-Widgets wird mithilfe von Designs geändert. http://dojotoolkit.org/reference-guide/1.7/dijit/themes.html

können Sie die Themen sehen, die auf http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html standardmäßig Schiff (HINWEIS: Diese Seite auf einer nächtlichen Build basiert, so soemtimes es defekt)

Themen angewendet werden mit Hilfe von CSS.
Ich würde Ihr eigenes CSS-Stylesheet erstellen. Fügen Sie dem Body-Knoten den Namen des Themas hinzu.

<body class="tundra myTheme"> 

Die besondere css Sie suchen, ist

.myTheme .dijitComboBox .dijitDownArrowButton {} /* The grey box */ 
.myTheme .dijitComboBox .dijitDownArrowButton .dijitArrowButtonInner { /* The arrow */ 
    background: url(images/spriteArrows.png) no-repeat scroll 0 center; 
} 

/* Hover */ 
.myTheme .dijitComboBox .dijitDownArrowButtonHover {} /* The grey box */ 
.myTheme .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {} /* The arrow */ 

/* Active (mouse down) */ 
.myTheme .dijitComboBox .dijitDownArrowButtonActive {} /* The grey box */ 
.myTheme .dijitComboBox .dijitDownArrowButtonActive .dijitArrowButtonInner {} /* The arrow */ 

Mit Hilfe der Entwickler-Tools mit Ihrem Browser finden Sie die CSS-Klassen ermitteln, die Sie außer Kraft setzen suchen, um.

+0

Danke @Craig Swing, aber ich habe vergessen zu fragen, wie man das Bild wechselt, wenn die Maus einzieht und auszieht. – OammieR

+0

_And +1 zu Ihnen für das neue Wissen._ – OammieR

+0

Ich aktualisierte die CSS, um den Hover und aktive Stile für eine ComboBox zu zeigen. Die Dojo-Steuerelemente verwenden dieselbe Technik mit Hover und Active. Es gibt andere "Zustände" und Sie sehen mehr in der Basis mixin - dijit._CssStateMixin. –

0

ich den Code durch eine enge Zusammenarbeit dann gesucht hatte, fand ich es nicht dijit.form.ComboBox oder dijit.form.FilteringSelect nicht verwendet.

verwendet er bei normaler HTML <div><input><a>

Hier http://jsfiddle.net/fQZFr/

ich fertig sind.