Enhance your jQuery: floatlabels.js für schickere Eingabefelder
Kommentare

Floatlabels.js ist ein jQuery-basiertes Plug-in, das es Webdesignern erlaubt, Eingabefelder auf Internetseiten userfreundlicher zu gestalten, indem es sie gemäß dem Floated Labels Pattern umwandelt.

Floatlabels.js ist ein jQuery-basiertes Plug-in, das es Webdesignern erlaubt, Eingabefelder auf Internetseiten userfreundlicher zu gestalten, indem es sie gemäß dem Floated Labels Pattern umwandelt. Wer nichts mit diesem Begriff anfangen kann: Floated Labels sind Eingabefelder, die in der „Leerposition“ einen bestimmten Platzhalter beinhalten, z.B. „Name“. Gibt man jetzt seinen Namen in das Feld ein, wird der Platzhalter verkleinert über der Eingabe dargestellt – eine unscheinbare aber nützliche Layout-Funktion, besonders auf mobilen Geräten, wo man so viel Inhalt wie möglich auf vergleichsweise kleinen Bildschirmen platzieren möchte.

Die Installation von floatlabels.js ist relativ einfach. Der Download beinhaltet schon die neuste Version von jQuery, die man für das Plug-in benötigt. Laut Entwicklerangaben läuft floatlabels mit jQuery 1.8 und aufwärts, alle Versionen darunter sind nicht gestestet. Nach dem Runterladen spielt man die Datei auf den Server und setzt floatlabels im Code nach jQuery. Anschließend initialisiert man das Plug-in mit einem einfachen Call – fertig: alle ausgewählten Eingabefelder werden in Floated Labels konvertiert.

Das Skript beinhaltet auch einige Optionen zur individuellen Anpassung. Die Floated Labels können z.B. in einem anderen Format als der Platzhalter gestaltet werden, außerdem kann man den Labels verschiedene Klassen zuweisen. Eine vollständige Übersicht über die Features von floatlables.js, komplett mit Code-Beispielen findet Ihr auf dem Github.

Aufmacherbild: Social networking media, chat, messaging and communication concept von Shutterstock / Urheberrecht:Oleksiy Mark

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -