Interaktives Design

Wie style «Wählen Sie mit DropKick

Wenn es um die Gestaltung von Webseiten geht, ist nichts so schwierig wie Formulare. Und wenn es um Stylingformen geht - fast - ist nichts so knifflig wie das mit CSS, aber es gibt große Einschränkungen, wie viel wir mit CSS alleine erreichen können. Oft ist die einzige praktikable Option das Styling über JavaScript, und als eine Form der progressiven Verbesserung müssen wir uns nicht davor zurückhalten.

In diesem Artikel werden wir verwenden Dropkick Drop-Down erstellen. Was Dropkick tut, transformiert die

Das erste, was wir tun müssen, ist ein

DropKick aufrufen

Sobald wir unsere eingerichtet haben in etwas, auf das wir uns verlassen können, mit CSS zu stylen. Außerdem wurden unsere Werte in die neuen HTML5-Datenattribute eingefügt (mit dem Namen data-dk-dropdown-value).

Wir können nun unser Dropdown mit CSS formatieren oder eines der DropKick-Themen verwenden, wenn wir das bevorzugen. Zur Zeit des Schreibens gibt es drei Themen zur Verfügung, die Standard, dunkel glänzend und leicht glänzend. Aber die meisten Leute werden ihre eigenen Stile verwenden wollen, die den Bedürfnissen ihres Projekts entsprechen.

DropKick erweitern

DropKick zu erweitern ist ein einfacher Vorgang. Wenn wir beispielsweise feststellen möchten, wann eine Änderung am Dropdown vorgenommen wurde, können wir den Event-Handler für Änderungen wie folgt hinzufügen: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Abschließende Gedanken

Ich bin mir sicher, dass es tausend Möglichkeiten gibt, ein Auswahlmenü ohne die Verwendung von jQuery zu stylen, aber diejenigen, die nur CSS verwenden, kämpfen gegen die Standardeinstellungen des Browsers. Die Einfachheit dieses Plugins und die enorme Flexibilität, die es bietet, und der fortschrittliche Verbesserungsansatz, den es braucht, machen DropKick zu einer ausgezeichneten Lösung.

Haben Sie DropKick in einem Projekt verwendet? Haben Sie eine bevorzugte Stylingmethode?