Vom eigenen Plugin und schlanken Checkboxen

von Henry Zeitler

Ich müsste jetzt lange überlegen wann ich das letzte Web-Projekt ohne individuelle Checkboxen und Radio-Buttons umgesetzt habe. Die Formularelemente sollen aber nicht nur leicht dem Design der Seite angepasst werden können, sondern dabei natürlich auch ihre ursprüngliche Funktionalität behalten. Ich zeige euch mal das schlanke Plugin, welches ich in meinen Projekten dafür einsetze und plädiere zum Selbermachen.

Eigene Plugins sind oft schlanker

Zu den absoluten Basics meines Workflows gehören Snippets, Templates oder Vorlagen für immer wiederkehrende Anforderungen. Ich neige dazu, die meisten wiederverwertbaren Codeschnipsel, Erweiterungen oder Features wenn möglich als Plugin zu archivieren und sie z.B. auf jsFiddle zentral zu speichern.

Und ich habe die Erfahrung gemacht, dass selbst geschriebene Plugins zwar initial mehr Aufwand bedeuten können als eine vorgefertigte Lösung, aber nach einer gewissen Reifephase durch die verschiedenen Projekte schließlich viel Zeit und vor allem Kilobytes sparen. Ganz zu schweigen vom Lerneffekt.

Die Installation eines fertigen Plugins macht in manchen Fällen Sinn, sollte aber meiner Meinung nach im Vorfeld immer gründlich abgewägt werden.

 

Schaukel als Plugin am Schild am RheinEigene Plugins sind oft schlanker und schnell installiert

Mein Plugin für Checkboxen und Radio-Buttons

Schauen wir uns so ein selbst erstelltes, extrem überschaubares und simples Plugin mal an.

Die Vorüberlegung: Die nativen HTML-Elemente für Checkboxen und Radio-Buttons sind browserübergreifend betrachtet extrem schwer anzupassen. Eine bewährte Methode ist es deshalb, sie unsichtbar zu machen und rein optisch durch ein gestyltes Element zu ersetzen. Ihre Funktionalität wird aber dennoch abgefangen und die Werte können somit für eine Formularübermittlung auf normalem Wege übergeben werden.
Das funktioniert mit der CSS-Eigenschaft opacity: 0 (ja, der IE8 fällt damit raus, aber…) und der Ausrichtung der Layer mit z-index. Um die natürliche Funktion als Grundlage für die Mechanik zu behalten, frage ich den Zustand :checked im CSS ab und setze daraufhin die Styles.

Die zusätzlichen Elemente für die falschen Checkboxen und Radio-Buttons werden über JavaScript, bzw. jQuery hinzugefügt, um mit allen herkömmlichen Formularen, die z.B. aus einem CMS fallen, arbeiten zu können. Das Markup wird also lediglich erweitert und nicht abgeändert. Hierfür nutze ich Attributsselektoren, um auch nicht auf zusätzliche Klassen angewiesen zu sein.

Aber nichts erklärt es so gut wie das Snippet selbst:

 

 

Anstatt der farbigen Flächen können für den checked-Zustand auch Icon-Fonts oder Unicode-Characters, wie z.B. das Checkmark (✓), verwendet werden. Auf jeden Fall werden so auch hover-Zustände ohne zusätzliche Grafiken problemlos ermöglicht.

Wie bereits erwähnt habe ich diese Lösung mit nur wenigen Anpassungen bereits in diversen Projekten eingesetzt. Sie ist schlank, flexibel und leicht zu implementieren.
Wie denkt ihr darüber und welche Plugins benutzt ihr so dafür?

comments powered by Disqus