Benutzerdefinierte Zeiteingabefelder mit jQuery Timedropper
Einige Webformulare erfordern Datumsbasierte Eingaben und Datumsauswahl-Plugins können dabei helfen. Aber was ist mit Zeiteingaben?
Mit dem kostenlosen jQuery-Plugin Timedropper, Du kannst hinzufügen benutzerdefinierte Zeitaufnehmer Für das Festlegen von Terminen, das Planen von Telefonanrufen oder so ziemlich alles, was Sie brauchen.
Es ist unglaublich einfach und du Benötigen Sie nur die jQuery-Bibliothek anfangen Wenn Sie diese Bibliothek installiert haben, können Sie die Timedropper JS / CSS-Dateien hinzufügen und ausführen. Das ist es!
Jedes Eingabefeld muss sein von einem jQuery-Selektor angesteuert Das fügt dann das Eingabefeld Timedropper hinzu. Diese hat Optionen Sie können zusätzliche (optionale) Funktionen hinzufügen:
- Automatischer Wechsel - Ändert automatisch die Stunde / Minute, wenn Sie mit der Maus fahren
- Meridiane - Stellen Sie eine 12-Stunden-Uhr anstelle einer 24-Stunden-Uhr ein
- Format - Legt fest, wie Stunden und Minuten angezeigt werden (Standardstil ist 13:22 Uhr).
- Mausrad - Aktiviert die Zeitänderung basierend auf dem Scrollrad
- Init_animation - schaltet die verblassenden Animationseffekte ein
- setCurrentTime - fügt automatisch die aktuelle Uhrzeit zum Feldwert hinzu
Wenn Sie noch mutiger sind, können Sie den Stil ändern Verwenden Sie ein paar vorgepackte Themen oder erstellen Sie sogar Ihre eigenen.
In einem Meer von jQuery-Plugins sind Timedropper die Knie der Biene. Es wirklich bietet eine einzigartige Schnittstelle für jede App, um eine Uhrzeit unabhängig vom Gerät auszuwählen.
Natürlich ist es das mobil ansprechbar, So funktioniert es auch auf Smartphones & Tablets. Ich mag das aber nicht Mangel an Nummernblockunterstützung. Das scheint die naheliegendste Art zu sein, eine Zeit einzugeben. Ohne diese Funktion kann sie sich einschränkend anfühlen.
Trotzdem für eine einzigartige Schnittstelle und ein einfache einrichtung, Ich kann Timedropper jedem empfehlen, der es versuchen möchte.
Sie können finden der gesamte Quellcode kostenlos auf GitHub und Sie werden eine unglaublich einfache Demo in diesem Stift finden, die unten eingebettet ist.
Wenn Sie andere Gedanken oder Vorschläge haben, können Sie gerne mit dem Entwickler auf Twitter @felice_gattuso teilen.
