Simplease-Logo

Im Simplease-Blog schreiben wir über Design, Web-Entwicklung und unser Leben als Selbstständige.

newDropdown – Plugin für jQuery

von Mathias Placho am 20. November 2011

5 Kommentare zuletzt von Mirco Brandes

CSSOff Vorgabe

Unsere CSSOff Einsendung

Jeder der schonmal versucht hat eine per CSS zu gestalten, wird schnell bemerkt haben, dass dies nur eingeschränkt möglich ist. Mir ist es erst vor kurzem wieder aufgefallen, als ich für unsere Einreichung zum CSSOff Wettbewerb (unmatchedstyle.com) eine spezielle Dropdown-Liste umsetzen musste.

(Das Ergebnis gibt es hier zu sehen.)

Also habe ich mich auf die Suche nach einer Lösung gemacht. Schnell war mir klar, dass es für diesen Zweck bereits einige jQuery Plugins gibt.

Nach zwei bis drei Testversuchen die Ernüchterung: Wie so oft gibt es für bestimmte Anwendungen zwar bereits fertige Plugins, in vielen Fällen sind diese jedoch schlecht umgesetzt oder haben einfach zu viele Funktionen.

Dann muss ich es eben selber machen…

Die Herausforderung dabei war, eine bestehende Dropdown-Liste so mit HTML-Elementen nachzubauen, dass sie beliebig gestaltet werden kann, trotzdem aber die selben Interaktionsmöglichkeiten wie eine Standard Dropdown-Liste bietet. Weiters sollte sie natürlich in so vielen Browsern wie möglich exakt gleich dargestellt werden.

Das Ergebnis …

… ist ein jQuery-Plugin, dass eine oder mehrere Dropdown-Listen in eine newDropdown-Liste umbaut. Und das geht so:

$(ELEMENT).newDropdown(SIZE,DURATION);
 
// ELEMENT: eine oder mehrere Listen
// SIZE: gewünschte Breite
// DURATION: Dauer der Slide-Animation

Dazu ein paar Beispiele.

$("#zahlen").newDropdown(); 
// Die Dropdown-Liste mit der ID "zahlen" wird umgebaut.
 
$("#tiere,#autos").newDropdown(300); 
// Die Dropdown-Listen mit der ID "zahlen" und "autos" werden umgebaut. Breite: 300px
 
$("select").newDropdown(undefined,500); 
// Alle Dropdown-Listen im Dokument werden umgebaut. Animations-Dauer: 500ms

Im direkten Vergleich sieht das Ganze dann so aus:

Unser neues Buch: Wir erklären dir in klarer und verständlicher Weise, wie User Testing in der Praxis wirklich funktioniert » Zum Buch

Standard Dropdown-Liste 
newDropdown-Liste 


Da man innerhalb eines Formulars üblicherweise per Tabulator oder Maus navigiert, wurde auch die newDropdown-Liste dahingehend umgesetzt.

Gestaltung

Die Gestaltung der Liste erfolgt per CSS.

.new-dropdown {
	vertical-align:bottom;
}
.new-dropdown button {
	background-color: #bbb;
	border: none;
	padding:2px 5px 2px 5px;
	height: 20px;
	width: 100%;
}
.new-dropdown ul {
	background-color:#ccc;
	width: 100%;
}
.new-dropdown ul li {
	padding:2px 0px 2px 0px;
}
.new-dropdown ul li.active {
	background-color:#ddd;
}

IDs und Klassen die der Ursprungs Dropdown-Liste zugewiesen wurden, werden ebenfalls übernommen, wodurch eine gezielte Gestaltung einzelner Listen möglich ist.

Die Breite ist standardmäßig so groß wie die längste vorhandene Option. Eine fixe Breite kann bei der Zuweisung festgelegt werden.

$("select").newDropdown(500);

Alle Dropdown-Listen im Dokument werden mit einer Breite von 500px umgebaut.

Zur Verwendung

Ich stelle dieses Plugin, für jeden der ebenfalls Dropdown-Listen nach seinen Wünschen umsetzen will, gratis zur Verfügung. Es kann direkt über unsere Seite eingebunden oder als Paket heruntergeladen werden.

Paket: jquery.newDropdown-1.0.zip

<script type="text/javascript" src="http://www.simplease.at/newDropdown/jquery.newDropdown-1.0.min.js"></script>

Minified Version (3335 bytes)

<script type="text/javascript" src="http://www.simplease.at/newDropdown/jquery.newDropdown-1.0.js"></script>

Normal Version (5323 bytes)

Fragen, Probleme, Anregungen?

Remote Usability Tests - einfach gemacht.
Vorheriger Artikel: Google Chart Tools: Diagramme zeichnen leicht gemacht!
Nächster Artikel: Interface-Designer sind Typografen

Bisher 5 Kommentare

  1. Sarah25. November 2011

    Tolles Plugin, werd ich bei der nächsten Umsetzung gleich einbauen! Danke! Funktioniert es in allen Browsern?

  2. Mathias25. November 2011

    Danke Sarah!

    Bisher habe ich es in folgenden Browsern erfolgreich getestet:

    • Firefox 3.6, 6, 7, 8
    • Safari 5
    • Opera 11
    • Chrome 15
    • Internet Explorer 7, 8, 9
  3. Markus21. Mai 2013

    Habe das Problem, dass bei mehreren untereinander stehenden selects nur die unterste Box sauber funktioniert. Die oberen fahren dann immer nur kurz aus und sofort wieder ein. Habe schon verschiedene Z-Indexe usw. probiert. Gibt es hierfür eine Lösung

  4. dan7. Juli 2013

    Und wie les ich jetzt den gewählten Value aus? Bei mir funktioniert jetzt gar nichts mehr. Weder irgendein Event noch das auslesen des aktuellen Wertes.

  5. Mirco Brandes25. September 2013

    Hallo Mathias, ich habe ein ähnliches Problem wie dan und zwar nur mit dem Firefox. Ich habe 4 Auswahlfelder und nur bei einem klappt es „halbwegs“ mit der auswählen. Bei den anderen kommen keine Werte mit, wenn ich das Formular abschicke.

    Gibt es dafür einen Lösung, weil das ganze Script ansonsten ja super funktioniert. Viele Grüße Mirco

Du hast eine Meinung dazu? Wir freuen uns :)

Nach Kategorie filtern

Produkte von Simplease

Userbrain - Usability Testing

User-Tests einfach und am laufenden Band.
Mehr erfahren

Neue Artikel per E-Mail

Facebook Link Twitter Link