Campi di inserimento del tempo personalizzato con jQuery Timedropper
Alcuni moduli Web richiedono input basati sulla data e i plugin di selezione data possono aiutarti. Ma per quanto riguarda ingressi temporali?
Con il plugin jQuery gratuito Timedropper, Puoi aggiungere raccoglitori di tempo personalizzati per fissare appuntamenti, programmare telefonate o praticamente tutto ciò di cui hai bisogno.
È incredibilmente semplice e tu serve solo la libreria jQuery per iniziare. Una volta installata la libreria, è possibile aggiungere i file Timedropper JS / CSS e lasciarli funzionare. Questo è tutto!
Ogni campo di input deve essere preso di mira da un selettore jQuery che aggiunge quindi il campo di input Timedropper. Questo ha opzioni puoi aggiungere con funzionalità extra (opzionali):
- Cambio automatico - cambia automaticamente ora / minuto al momento del passaggio del mouse
- meridiani - imposta un orologio di 12 ore invece di 24 ore
- Formato - imposta la visualizzazione delle ore e dei minuti (lo stile predefinito è 1:22 pm)
- Rotellina del mouse - consente il cambio del tempo in base allo scroll wheel
- Init_animation - attiva gli effetti di animazione in dissolvenza
- setCurrentTime - aggiunge automaticamente l'ora corrente al valore del campo
Se sei ancora più audace possibile cambia lo stile utilizzando alcuni temi preconfezionati, o addirittura costruisci il tuo da zero.
In un mare di plugin jQuery, Timedropper è il ginocchio delle api. Veramente offre un'interfaccia unica per qualsiasi app per selezionare un'ora indipendentemente dal dispositivo.
Naturalmente lo è mobili-reattiva, quindi funziona anche su smartphone e tablet. Tuttavia, non mi piace il mancanza di supporto per il tastierino numerico. Sembra il modo più ovvio per entrare in un momento, quindi senza quella caratteristica, può sembrare limitante.
Ancora, per a interfaccia unica e a installazione semplice, Raccomando Timedropper per chiunque sia disposto a dargli un colpo.
Potete trovare tutto il codice sorgente gratis su GitHub e troverai una demo incredibilmente semplice in questa penna, incorporata di seguito.
Se hai altri pensieri o suggerimenti sentiti libero di condividere con lo sviluppatore su Twitter @felice_gattuso.
