Aangepaste tijdinvoervelden met jQuery Timedropper
Sommige webformulieren vereisen op datum gebaseerde invoer en datumkiezer plug-ins kunnen daarbij helpen. Maar hoe zit het met tijd invoer?
Met de gratis jQuery-plug-in Timedropper, je kan toevoegen aangepaste tijdkiezers voor het instellen van afspraken, het plannen van telefoongesprekken of vrijwel alles wat je nodig hebt.
Het is ongelooflijk eenvoudig en jij alleen de jQuery-bibliotheek nodig starten. Nadat u die bibliotheek hebt geïnstalleerd, kunt u de Timedropper JS / CSS-bestanden toevoegen en deze laten uitvoeren. Dat is het!
Elk invoerveld moet zijn getarget door een jQuery-selector die vervolgens het invoervak Timedropper toevoegt. Deze heeft opties je kunt toevoegen met extra (optionele) functies:
- Automatische schakelaar - past automatisch uur / minuut aan bij het mousen
- meridianen - stel een 12-uursklok in in plaats van een 24-uursklok
- Formaat - bepaalt hoe de uren en minuten verschijnen (standaardstijl is 1:22 uur)
- Muis wiel - maakt tijdswisseling mogelijk op basis van wielschuiven
- Init_animation - schakelt de vervagende animatie-effecten in
- setCurrentTime - voegt automatisch de huidige tijd aan de veldwaarde toe
Als je nog meer durft, kan dat verander de stijl een paar voorverpakte thema's gebruiken, of zelfs helemaal zelf een nieuw thema maken.
In een zee van jQuery-plug-ins zit Timedropper op de knieën van de bij. Het echt biedt een unieke interface voor elke app om een tijdstip te selecteren, ongeacht het apparaat.
Natuurlijk is dat zo mobile-responsieve, dus het werkt ook op smartphones en tablets. Ik vind het echter niet leuk gebrek aan num pad ondersteuning. Dat lijkt de voor de hand liggende manier om een tijd in te voeren, dus zonder die functie kan het beperkend aanvoelen.
Toch, voor een unieke interface en een eenvoudige installatie, Ik raad Timedropper wel aan voor iedereen die het wil proberen.
Je kunt vinden alle broncode gratis op GitHub en je vindt een ongelooflijk eenvoudige demo in deze pen, die hieronder is ingesloten.
Als je nog andere gedachten of suggesties hebt, kun je deze met de ontwikkelaar delen op Twitter @felice_gattuso.
