| ||||||||||||||||
Custom Form Elements ist eine freie (unter Version 3 der GPL) und modulare JavaScript-Bibliothek, welche basierend auf dem JavaScript-Framework MooTools Module anbietet, um Formularelemente auf Webseiten browserübergreifend mittels CSS gestalten zu können. Dabei wird nicht nur die den Formularelementen innewohnende Benutzerfreundlichkeit beibehalten, sondern diese gezielt erweitert um die Nutzererfahrung zu bereichern.
Eigenschaften[]
- Erweiterbar und modular, so dass die Möglichkeit besteht nur bestimmte Komponenten zu verwenden und nach Bedarf neue zu integrieren
- basiert auf MooTools, weitere Frameworks wie jQuery sollen folgen.
- vollständige Unterstützung des Tabindex
- unobstrusive - falls kein JavaScript aktiviert ist, werden die Formularelementen normal angezeigt
- eigener Namensraum cfe
Aufbau[]
Custom Form Elements besteht aus einem Kern aus 2 Klassen - einer Basisklasse für das Ersetzen der Formularelemente (enthalten in cfe.replace.js) und einem generischen Formularelement (enthalten in cfe.base.js)- , welche die Basisfunktionalität für den Einsatz darstellen. Durch weitere Module (cfe.module.*) und Add-ons (cfe.addon.*) kann die Funktionalität beliebig erweitert werden.
Module[]
- Checkbox
- Dieses Modul ersetzt die Auswahlkästen, welche sich nicht ohne Weiteres browserübergreifend gestalten lassen.
- Radiobutton
- Ähnlich dem Modul Checkbox, ersetzt aber Radiobuttons und unterstützt Gruppen von Radiobuttons.
- Select und Select Multiple
- Ersetzt das Select-Feld und erstellt eine Repräsentation inklusive Scrolling.
- Text
- Erweitert Textfelder in der Funktionalität und setzt bei Bedarf die Sliding-Doors CSS-Technik ein
- Password
- siehe Text
- Textarea
- Ähnlich dem Modul Text, ersetzt aber Textfelder.
- File
- Erlaubt es, das Datei-Upload-Feld und die zugehörige Schaltfläche nach Belieben zu gestalten
- Image, Submit, Reset
- erweitert die Schaltflächen und kann ebenfalls Sliding-Doors verwenden
Add-ons[]
- ToolTips
- erzeugt aus dem title-Attribut eines Formularelements ein Fragezeichen, welches beim Darüberfahren mit der Maus einen ToolTip darstellt
- Dependencies
- Mit diesem Addon wird es möglich, Abhängigkeiten von Auswahlkästen zu definieren, so dass abhängige Auswahlkästen automatisch selektiert werden können
- Toggle Checkboxes
- Stellt Funktionalität bereit, um Gruppen von Auswahlkästen zu selektieren oder zu deselektieren
Browserkompatibilität[]
Custom Form Elements ist kompatibel und getestet mit:
- Safari 3
- Internet Explorer 7 und 8
- Firefox 1.5+, 2.0+, und 3.0+
- Opera 9.0+