Campos de entrada de hora personalizados com o Timedropper jQuery
Alguns formulários da web exigem insumos baseados em data e plugins de selecionador de data podem ajudar com isso. Mas e quanto a entradas de tempo?
Com o plugin jQuery gratuito Timedropper, Você pode adicionar selecionadores de horário personalizados para marcar compromissos, programar chamadas telefônicas ou praticamente qualquer coisa que você precise.
É incrivelmente simples e você só precisa da biblioteca jQuery para começar. Depois de instalar essa biblioteca, você pode adicionar os arquivos Timedropper JS / CSS e deixá-lo rodar. É isso aí!
Cada campo de entrada deve ser segmentado por um seletor jQuery que então adiciona o campo de entrada Timedropper. este tem opções você pode adicionar com recursos extras (opcionais):
- Autoswitch - muda automaticamente hora / minuto quando
- Meridianos - definir um relógio de 12 horas em vez de 24 horas
- Formato - define como as horas e minutos aparecem (o estilo padrão é 1:22 pm)
- Roda do mouse - ativa a mudança de horário com base no rolagem da roda
- Init_animation - liga os efeitos de animação desaparecendo
- setCurrentTime - adiciona automaticamente a hora atual ao valor do campo
Se você é ainda mais ousado, você pode mudar o estilo usando alguns temas pré-embalados, ou até mesmo construindo seus próprios a partir do zero.
Em um mar de plugins jQuery, Timedropper é os joelhos da abelha. É realmente oferece uma interface única para qualquer aplicativo selecionar um horário, independentemente do dispositivo.
Naturalmente, é responsivo a dispositivos móveis, por isso funciona também em smartphones e tablets. No entanto, eu não gosto do falta de suporte num teclado. Essa parece ser a maneira óbvia de entrar em um horário, então, sem esse recurso, ele pode se sentir limitado.
Ainda assim, por um interface única e um configuração simples, Eu recomendo Timedropper para qualquer pessoa disposta a dar um tiro.
Você pode encontrar todo o código fonte grátis no GitHub e você encontrará uma demonstração incrivelmente simples nesta caneta, incorporada abaixo.
Se você tiver outras idéias ou sugestões, não hesite em compartilhar com o desenvolvedor no Twitter @felice_gattuso.
