Пользовательские поля ввода времени с помощью jQuery Timedropper
Некоторые веб-формы требуют ввода данных на основе даты, и плагины выбора даты могут помочь с этим. Но как насчет времени?
С бесплатным плагином jQuery TimedropperВы можете добавить пользовательские указатели времени для назначения встреч, планирования телефонных звонков или почти всего, что вам нужно.
Рекомендуемое чтение: типы ввода в HTML5-формах: дата, цвет и диапазон
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Это невероятно просто, и вам нужна только библиотека jQuery, чтобы начать работу. После установки этой библиотеки вы можете добавить файлы Timedropper JS / CSS и запустить ее. Это оно!
Каждое поле ввода должно быть предназначено для селектора jQuery, который затем добавляет поле ввода Timedropper. У этого есть опции, которые вы можете добавить с дополнительными (дополнительными) функциями:
- Автопереключение — автоматически меняет часы / минуты при наведении
- Меридианы — установите 12-часовые часы вместо 24-часовых
- Формат — устанавливает способ отображения часов и минут (стиль по умолчанию 1:22 вечера)
- Колесо мыши — позволяет изменять время на основе колесика
- Init_animation — включает эффекты затухания анимации
- setCurrentTime — автоматически добавляет текущее время к значению поля
Если вы еще более дерзкие, вы можете изменить стиль, используя несколько готовых тем, или даже создать свой собственный с нуля.
Timedropper — это колени пчелы в море плагинов jQuery. Это действительно предлагает уникальный интерфейс для любого приложения, чтобы выбрать время независимо от устройства.
Естественно, он реагирует на мобильные устройства, поэтому работает и на смартфонах и планшетах. Однако мне не нравится отсутствие поддержки num pad. Это кажется очевидным способом ввода времени, поэтому без этой функции оно может быть ограниченным.
Тем не менее, для уникального интерфейса и простой настройки, я рекомендую Timedropper для тех, кто готов дать ему шанс.
Вы можете найти весь исходный код бесплатно на GitHub и вы найдете невероятно простую демонстрацию в эта ручка, встроенный ниже.
Если у вас есть какие-либо другие мысли или предложения, не стесняйтесь поделиться с разработчиком в Twitter @felice_gattuso,
Увидеть перо timedropper.jsà £ Â,Âμà £ ƒ³à £ ÃÂ-à £ à« по CodeSample (@webhacck) на CodePen,
Рекомендуемое чтение: Практическое руководство. Настройка и тематика jQuery UI Datepicker
<script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)