Начална » Toolkit » Персонализирани полета за въвеждане на време с jQuery Timedropper

    Персонализирани полета за въвеждане на време с jQuery Timedropper

    Някои уеб форми изискват входове, базирани на дата и приставки за избор на дата могат да помогнат с това. Но за какво става въпрос времеви входове?

    С безплатния jQuery плъгин Timedropper, можете да добавите обичайно събиране на време за задаване на срещи, планиране на телефонни разговори или почти всичко, от което се нуждаете.

    Това е невероятно просто и вие трябва само библиотеката jQuery за да започнете. След като инсталирате тази библиотека, можете да добавите Timedropper JS / CSS файловете и да я стартирате. Това е!

    Всяко поле за въвеждане трябва да бъде насочен от селектора на jQuery който след това добавя полето за въвеждане на Timedropper. Това има опции можете да добавите с допълнителни (по избор) функции:

    • Autoswitch - автоматично сменя час / минута, когато се поставя мишка
    • Меридианите - задайте 12-часов часовник вместо 24-часов
    • формат - задава начина на показване на часовете и минутите (по подразбиране стил 1:22)
    • колелцето на мишката - дава възможност за промяна на времето въз основа на превъртането на колелата
    • Init_animation - включва ефектите на затихване на анимацията
    • setCurrentTime - автоматично добавя текущото време към стойността на полето

    Ако сте още по-дръзки, можете променете стила използване на няколко предварително опаковани теми или дори изграждане на собствени от нулата.

    В море от jQuery плъгини, Timedropper е пчелното колене. Това наистина предлага уникален интерфейс за всяко приложение, за да изберете време независимо от устройството.

    Естествено мобилни отзивчив, така че работи и на смартфони и таблети. Въпреки това, аз не харесвам липса на поддръжка на num pad. Това изглежда като очевидния начин за въвеждане на време, така че без тази функция може да се чувства ограничаващо.

    Все пак, за уникален интерфейс и a проста настройка, Аз препоръчвам Timedropper за всеки, който желае да го направи.

    Можете да намерите целия изходен код безплатно в GitHub и ще намерите невероятно проста демонстрация в тази писалка, вградена по-долу.

    Ако имате някакви други мисли или предложения, не се колебайте да споделите с разработчика на Twitter @felice_gattuso.