Топ 15: Лучшие плагины для замены jQuery, JavaScript, CSS Checkbox и Radio button

Визуально потрясающие интерфейсы будут всегда необходимы в наше время, скучное приложение, вероятно, не будет фаворитом пользователей, верно? Как дизайнер или веб-разработчик, вы отвечаете за создание пользовательских интерфейсов, которые просты в использовании, но при этом выглядят хорошо. Флажки по умолчанию и переключатели, как правило, не лучший выбор для приложения, компоненты которого имеют другие стили (пользовательские кнопки и т. Д.), Поэтому вы не можете не забыть также придать этим компонентам отличный стиль.

В этой статье мы хотим поделиться с вами 15 наиболее впечатляющими плагинами на основе CSS и JavaScript, чтобы за пару секунд создать удивительные и красивые флажки в вашем веб-приложении. Наслаждайтесь ими!

15. TinyToggle

Github

Tiny Toggle

TinyToggle — это простой и полезный плагин для маскировки тегов html input тегов в ваших проектах. Вы можете выбрать один из 13 доступных наборов иконок, вы также можете настроить цветовую палитру и размер по своему усмотрению и дополнить внешней библиотекой, такой как Font Awesome. TinyToggle основан на веб-шрифтах, так как он прост в использовании и легок для включения в ваш проект.

14. prettyCheckable

Github

Довольно проверяемый плагин

Плагин jQuery для замены флажков и радио для пользовательских изображений. Особенности этого плагина:

  • Совместимость с IE7 +, Chrome, Firefox, Safari и мобильными браузерами;
  • Индивидуальный дизайн, любезно предоставленный Бруно О. Баррос;
  • Четыре варианта цвета (начальная загрузка Twitter) + редактируемый PSD;
  • Лучше выглядеть размер;
  • Супер легкая реализация;
  • Можно выбрать с помощью Tab и проверить с помощью клавиатуры;
  • Изменить события Цепочка сохранена;
  • Больше области щелчка / касания. Плюс для мобильных устройств.

13. iCheck Bootstrap

Github

iCheck Bootstrap CSS

iCheck-bootstrap — это чистое решение CSS для отображения флажков в стиле начальной загрузки Twitter и переключателей. icheck-bootstrap основан на стилях начальной загрузки Twitter, поэтому убедитесь, что вы правильно связали таблицу стилей начальной загрузки в своем заголовке и используете структуру разметки по умолчанию:


Click to check

12. Флажок радио

Github

Checkbox Радио Плагин

Checkbox Radio — крошечный плагин jQuery, созданный filamentgroup создавать прогрессивно улучшенные радиокнопки и флажки.

11. Волшебный Ввод

Github

Волшебный вход

Волшебный ввод — это потрясающая коллекция стилей CSS3 для флажков и переключателей, которые сделают ваши входы более красивыми, используя только один элемент и CSS.

10. Волшебная проверка

Github

Плагин Magic Check

Magic Check — это крошечная библиотека CSS для украшения Radio and Checkbox. Он предлагает поддержку Chrome, Firefox, Safari, Opera и IE9 +.

9. Переключатель начальной загрузки

Переключатель начальной загрузки

Преврати флажки и переключатели в тумблеры. Он предлагает поддержку IE9 + и всех других современных браузеров.

8. Флажок начальной загрузки

Github

Bootstrap Checkbox Плагин jQuery

Bootstrap Checkbox — это очень простой и простой в использовании компонент флажка, основанный на платформе Bootstrap. Чтобы начать работу с этим плагином, просто включите копию bootstrap-checkbox.js Сценарий в вашем документе:


Выберите элементы-флажки в jQuery, где вы хотите инициализировать компонент, и вызовите метод checkboxpicker:

$(':checkbox').checkboxpicker();

И все, мгновенно у вас будет замечательный переключатель да / нет вместо встроенных флажков браузера.

7. Красивая галочка

Github

Красивая галочка

Prett Checkbox — это чистая библиотека CSS для украшения флажков и переключателей, JavaScript не требуется. Особенности:

  • основной
    • Формы — Квадрат, кривая, круглая
    • Варианты — По умолчанию, Заполнить, Толстый
    • Цвета — Первичное, Успех, Информация, Предупреждение, Опасность
    • Типы цвета — Твердый, Контур
    • Анимации — Гладкая, Тада, Желе, Пульс, Поворот
  • Переключатель — стиль iOS — Outline, Fill, Slim
  • отзывчивый
  • Нет JavaScript
  • Пользовательские иконки шрифтов
  • SVG Иконки
  • Поддержка изображений
  • Переключаться между иконками / SVG’s / изображениями
  • Замок
  • Состояние — Фокус, Наведение, Неопределенный
  • Поддерживает фреймворки — Bootstrap, Foundation, Sematic UI, Bulma, …
  • Настройка SCSS
  • Поддерживает все современные браузеры, включая мобильные устройства
  • Печать дружественная

6. Labelauty

Github

Labelauty.js

Labelautiy — очень удобный и легкий плагин jQuery, который придает красоту флажкам и переключателям и позволяет создавать собственные метки для каждого состояния (не) отмеченных входов. Чтобы инициализировать флажок с метками по умолчанию «Checked» и «Unchecked», по одному для каждого состояния ввода, вы можете просто использовать следующий код:


$(document).ready(function(){
$(":checkbox").labelauty();
});

Вы можете изменить метки по умолчанию (см. раздел «Настройки») или присвойте индивидуальные метки каждому флажку.

5. Bootstrap 4 Ti-Ta-Toggle

Github

Bootstrap 4 Ti-Ta-Toggle

Ti-Ta-Toggle Использование удивительных кнопок переключения без Javascript или любой другой логики, кроме плоских элементов формы. Шаблон такой же, как Twitter-Bootstrap. Так что это может быть реализовано без всяких усилий. Он обеспечивает поддержку следующих браузеров: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, стандартный Android-браузер 4.2, Chrome Android. Версия 1.0.0 TitaToggle имеет поддержку Bootstrap v3.x.x

4. JQuery Toggles

Github

JQuery Toggles

Toggles — это легкий плагин jQuery, который создает легко переключаемые кнопки. Вам нужно указать класс для конкретной темы, которую вы хотите использовать. В этом случае мы используем toggle-modern. Класс toggle — это просто то, что мы будем использовать в качестве селектора для его инициализации:


Темы, которые мы могли бы использовать:

  • мягкий
  • свет
  • темно
  • iphone
  • современный

Конечно, вы можете написать свои собственные темы / настроить стиль.

3. Bootstrap Toggle

Github

Bootstrap Toggle Plugin

Bootstrap Toggle — очень гибкий плагин Bootstrap, который преобразует флажки в переключатели. Для начала включите плагин в свой проект и просто добавьте data-toggle="toggle" атрибут для преобразования флажков в переключатели.

2. я проверяю

Github

Плагин iCheck

iCheck — это плагин для создания настраиваемых флажков и переключателей для jQuery и Zepto. Версия 2.0 находится в процессе, и он получил огромный прирост производительности, много новых опций и методов. Он находится в состоянии релиза-кандидата, поэтому вы можете попробовать его использовать. Этот плагин предлагает:

  • Одинаковые входы в разных браузерах и устройствах — и то и другое настольный и мобильный
  • Поддержка сенсорных устройств — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Доступные с клавиатуры входыTab, Spacebar, Arrow up/down и другие ярлыки
  • Свобода настройки — использовать любой HTML и CSS для стилизации ввода (попробуйте 6 готовых сетчатки скинов)
  • JQuery и Zepto Поддержка библиотек JavaScript из одного файла
  • Скринридер доступных входовARIA атрибуты для VoiceOver и других
  • Легкий размер — 1 кб разархивирован

1. Switchery

Github

Switchery Demo

Switchery — это простой компонент, который помогает вам превратить входные данные флажка HTML по умолчанию в красивые переключатели в стиле iOS 7 всего за несколько простых шагов. Вы можете легко настроить переключатели, чтобы они идеально подходили к вашему дизайну. Лицензировано по лицензии MIT. Поддерживаются все современные браузеры: Chrome, Firefox, Opera, Safari, IE8 +.

Если вам известен другой компонент с открытым исходным кодом, который заменит эти уродливые стандартные флажки браузера, поделитесь им с сообществом в поле для комментариев.

Ссылка на основную публикацию
Adblock
detector