10 лучших тумблеров в JavaScript и Pure CSS (обновление 2023 г.)
Тумблеры используются во многих интерфейсных веб-приложениях, требующих специальных возможностей. Очень интересно и часто полезно взаимодействовать с оперативными данными. Его можно использовать для переключения между различными представлениями, разделами или режимами.
Они встроены в iOS и другие мобильные операционные системы. Для него не нужно писать какой-либо код. Но когда дело доходит до создания приложений с помощью HTML, CSS и JavaScript, все становится сложнее.
Вот 10 лучших и самых популярных решений JavaScript и Pure CSS для создания удобных переключателей и кнопок-переключателей для вашего веб-приложения. Я надеюсь тебе понравится.
Первоначально опубликовано 3 января 2018 г., обновлено 13 января 2023 г.
Плагины переключения jQuery:
Плагин jQuery с анимированным CSS3-переключателем — rcSwitcher
Плагин jQuery, который использует переходы и преобразования CSS3 для создания плавных тумблеров включения/выключения из обычных флажков и радиовходов.
[Демо] [Скачать]
iOS-подобный плагин Smooth Tri-State Switch с jQuery — multiSwitch
Плагин jQuery для создания плавных тумблеров в стиле iOS из собственных флажков, которые работают с 3 состояниями проверки: включено , выкл. и ноль.
[Демо] [Скачать]
Основные тумблеры ВКЛ/ВЫКЛ в jQuery — Switcher
Сверхлегкий плагин jQuery, который преобразует родные элементы Checkbox и Radio Button в тумблеры включения/выключения, вдохновленные iOS, просто с помощью JS-вызов.
[Демо] [Скачать]
Плагин для флажков в стиле iOS с сенсорным управлением и jQuery — Simple Switch сенсорные сервисы.
[Демо] [Скачать]
Классные анимации тумблеров с jQuery и Anime.js
Коллекция классных, плавно анимированных тумблеров на основе jQuery, anime.js, CSS/CSS3, Checkbox или Radio вход.
[Демо] [Скачать]
Плагины тумблерного переключателя Vanilla JavaScript:
switchery
Простой компонент, который поможет вам превратить ввод HTML-флажков по умолчанию в красивые переключатели в стиле iOS всего за несколько простых шагов.
Вы можете легко настроить переключатели так, чтобы они идеально соответствовали вашему дизайну.
[Демо] [Скачать]
Компонент ползункового переключателя Smooth в стиле iOS – SlideOn
Крошечный и быстрый компонент пользовательского интерфейса, который преобразует обычный ввод флажков в настраиваемые ползунковые переключатели.
[Демо] [Скачать]
Тумблеры, работающие только с CSS:
Тумблеры, доступные только с помощью CSS
Чистый подход CSS к созданию красивых, доступных тумблеров из флажков и переключателей. Совместимость с фреймворками Bootstrap и Foundation CSS.
[Демо] [Скачать]
Реалистичный iOS-переключатель на чистом CSS
Switchery — это простой плагин jQuery Vanilla JavaScript, который преобразует стандартные флажки Html в плоские тумблеры в стиле iOS с красивыми скользящими эффектами.
Загрузка демоверсии
el-checkbox
Чистая библиотека CSS/CSS3 для создания настраиваемых флажков, переключателей и тумблеров в стиле iOS.
Скачать демоверсию
Дополнительные ресурсы:
В этой коллекции вы увидели 10 лучших библиотек тумблеров на JavaScript или CSS. Я решил показать только самые оригинальные и, возможно, лучшие работы в группе. Это не означает, что нет других, столь же замечательных; это означает, что если у вас действительно есть время, вы можете провести весь день, прокручивая бесконечные часы времени, потраченные на эти библиотеки, и потеряться на несколько дней.
Ищете дополнительные плагины jQuery или библиотеки JavaScript для создания потрясающих переключателей и кнопок-переключателей в Интернете и на мобильных устройствах? Дополнительные сведения см. в разделах jQuery Switch и JavaScript/CSS Switch.
Не пользователь jQuery? Ознакомьтесь с нашими 10 лучшими библиотеками JavaScript и CSS для переключателей.
Дополнительные ресурсы:
- 10 лучших замен флажков и радиовходов
- 10 лучших тумблеров на JavaScript и чистом CSS
- 10 лучших плагинов JavaScript для проверки всех флажков
- 10 лучших настраиваемых флажков и радиовходов
- 5 лучших компонентов Switch (Toggle Button) для приложений Vue.
js - 10 лучших компонентов тумблеров для React и React Native
jsДемонстрация основных функций виджета jQuery Switch
Загрузка демо…
index.html
Также доступно для:
СПРАВКА по API- Уведомления
- Отправка уведомлений
- Всегда виден
- Показать настоящее имя
Компонент Switch является частью пользовательского интерфейса Kendo для jQuery, библиотеки пользовательского интерфейса профессионального уровня с более чем 110 компонентами для создания современных и многофункциональных приложений. Чтобы попробовать его, подпишитесь на бесплатную 30-дневную пробную версию.
Скачать бесплатную пробную версию
Описание
Переключатель jQuery, также известный как кнопка-переключатель, позволяет вам выбирать между двумя эксклюзивными вариантами.
В этой демонстрации вы можете увидеть Switch в базовом сценарии, созданном из элемента input и отображающем варианты Yes и No для выбора.
Элемент управления Kendo UI для jQuery Switch является частью Kendo UI для jQuery, всеобъемлющей библиотеки пользовательского интерфейса профессионального уровня для создания современных и многофункциональных приложений. Коллекция Kendo UI for jQuery содержит более 110 компонентов пользовательского интерфейса, множество гаджетов для визуализации данных, источник данных на стороне клиента и встроенную библиотеку MVVM (Model-View-ViewModel).
Этот пример Switch является частью уникальной коллекции из сотен демонстраций jQuery, с помощью которых вы можете увидеть все компоненты пользовательского интерфейса Kendo для jQuery и их функции в действии. Просматривайте исходный код демонстраций из библиотеки или напрямую адаптируйте и редактируйте их и внешний вид их темы в пользовательском интерфейсе Kendo для jQuery Dojo или ThemeBuilder.