Brugerdefinerede Time Input Fields med jQuery Timedropper
Nogle webformularer kræver datobaserede input og date picker plugins kan hjælpe med det. Men hvad med tidsindgange?
Med det gratis jQuery-plugin Timedropper, du kan tilføje brugerdefinerede tidspukker til indstilling af aftaler, planlægning af telefonopkald eller stort set alt hvad du behøver.
Det er utroligt simpelt og dig behøver kun jQuery-biblioteket at komme i gang. Når du har installeret det pågældende bibliotek, kan du tilføje Timedropper JS / CSS-filerne og lade det køre. Det er det!
Hvert indtastningsfelt skal være målrettet af en jQuery-vælger som derefter tilføjer Timedropper inputfeltet. Dette har muligheder Du kan tilføje med ekstra (valgfri) funktioner:
- AUTOSWITCH - automatisk ændrer time / minut, når mousing up
- meridianer - Indstil en 12-timers ur i stedet for en 24-timers klokke
- Format - angiver hvordan timer og minutter vises (standard stil er 1:22 pm)
- Musehjul - muliggør tidsændring baseret på hjulrulning
- Init_animation - tænder de fading animation effekter
- setCurrentTime - tilføjer automatisk den aktuelle tid til feltværdien
Hvis du er endnu mere dristig, kan du ændre stilen Brug et par færdigpakkede temaer, eller endda bygg din egen fra bunden.
I et hav af jQuery-plugins er Timedropper biet knæ. Det virkelig tilbyder en unik grænseflade for enhver app at vælge en tid uanset enhed.
Det er naturligvis det mobil-responsive, så det virker også på smartphones og tablets. Jeg kan dog ikke lide mangel på num pad support. Det virker som den indlysende måde at komme ind på en tid, så uden at det kan føle sig begrænsende.
Stadig for en unik grænseflade og a simpelt setup, Jeg anbefaler Timedropper til alle, der er villige til at give det et skud.
Du kan finde alle kildekoden gratis på GitHub, og du finder en utrolig simpel demo i denne pen, indlejret nedenfor.
Hvis du har andre tanker eller forslag, er du velkommen til at dele med udvikleren på Twitter @felice_gattuso.
