Selectboxen inkl. Schaltflächen und Scrollbars frei gestalten.

[Gernot Back]

Hallo an alle,

ich stehe nächste Woche wohl vor der undankbaren Aufgabe, eine Selectbox mit Javascript nachbauen zu müssen:

Der Kunde will die Schaltfläche mit dem Pfeil zum Aufklappen derselben sowie deren Scrollbar unbedingt in seinen Markenfarben gestaltet wissen. (Naja, wenn er unbedingt ins Unglück rennen will ... !)

Meine Idee ist ja, zunächst einmal im HTML-Code mit ganz normalen Selectboxen zu arbeiten und diese dann nachträglich "onload" über Javascript durch die gestaltete Variante mit Links (A-Elementen) zu ersetzen.

Nach Begriffen wie "customized select" bzw. "~ dropdown" u.Ä. habe ich bereits gesucht und dabei wenig Brauchbares gefunden.

Also habe ich mich mal einfach selbst ans Werk gemacht und bin so weit auch bereits gekommen:

http://lernspielwiese.de/customselect/

Ich arbeite da auch für den IE und Firefox bereits jetzt mit Timeouts und globalen Variablen (sehr unschön), aber für Opera scheint das alleine auch noch nicht zu helfen, da dort ein Focus-Event auf der Pseudo-Selectbox offensichtlich meist auch gleich wieder ein Blur-Event auf diesem Ersatz-Link auslöst.

Lustig ist es ja sowieso auch, wenn man etwa die Seiten von BMW mit Opera besucht, wo solche Pseudo-Selectboxen vorkommen, deren Entwickler sich allerdings um unaufdringliches Javascript, wie es mir vorschwebt, von vornherein nicht gekümmert haben:

http://www.bmw.com/

bzw. noch 'schöner':

http://www.bmw.de/

Letzteres ist allerdings eine Flash-Seite.

Kennt jemand ein wirklich brauchbares Skript, das ich mir für meine Zwecke  anpassen könnte, oder Seiten, wo es besser läuft als bei BMW (das Verhalten der dortigen "Selectboxen" ist ja, auch wenn man die Seite mit anderen Browsern als Opera besucht, nicht wirklich normal), bzw. hat jemand von euch eine Idee, wie ich meinem Focus-Blur-Problem bei Opera begegnen könnte? (Mit e.preventDefault() und e.stopPropagation() habe ich schon vergeblich experimentiert)

Gruß Gernot

[berdn]

Hallo Gernot,

muss denn wirklich eine "echte" Selectbox simuliert werden?
Ich kamm bei einen Kunden damit durch, dass ich ein horizontales CSS-Menue wie eine habe Selcetbox aussehen lassen, die Aktion kam dann bei einen hover/mousover.
Sieht erstmal echt aus, und funktioniert dann auch ohne JS, zumindestens im IE 7.
Auf Klick dann natürlich in allen Browsern mit JS.
Aber den mousover fand der Kunde am Ende sogar besser ;-)

Die angezeigte Liste bestand aber auch nur aus 8 Einträgen
Was nicht ging war der Ansprung Alphabetisch per Tastatur, was dann bei mehr als 30 Einträgen der Benutzer intuitiv macht.

Hier dann ggf. ein key-Event abfangen?

Ansonsten hatte ich auch schon mehrfach zu diesem Thema im Web gesucht und noch keine Lösung gefunden.

Mir einer echten Pulldownbox zu arbeiten und dann aus dem View zu schieben, und durch eine simulierte zu ersetzen ist glaube ich wirklich eine knifflige Angelegenheit mit focus/blur/hover und timeout ...

Liebe Grüße

Bernd