Содержание
- 1 15. TinyToggle
- 2 14. prettyCheckable
- 3 13. iCheck Bootstrap
- 4 12. Флажок радио
- 5 11. Волшебный Ввод
- 6 10. Волшебная проверка
- 7 9. Переключатель начальной загрузки
- 8 8. Флажок начальной загрузки
- 9 7. Красивая галочка
- 10 6. Labelauty
- 11 5. Bootstrap 4 Ti-Ta-Toggle
- 12 4. JQuery Toggles
- 13 3. Bootstrap Toggle
- 14 2. я проверяю
- 15 1. Switchery
Визуально потрясающие интерфейсы будут всегда необходимы в наше время, скучное приложение, вероятно, не будет фаворитом пользователей, верно? Как дизайнер или веб-разработчик, вы отвечаете за создание пользовательских интерфейсов, которые просты в использовании, но при этом выглядят хорошо. Флажки по умолчанию и переключатели, как правило, не лучший выбор для приложения, компоненты которого имеют другие стили (пользовательские кнопки и т. Д.), Поэтому вы не можете не забыть также придать этим компонентам отличный стиль.
В этой статье мы хотим поделиться с вами 15 наиболее впечатляющими плагинами на основе CSS и JavaScript, чтобы за пару секунд создать удивительные и красивые флажки в вашем веб-приложении. Наслаждайтесь ими!
15. TinyToggle
TinyToggle — это простой и полезный плагин для маскировки тегов html input тегов в ваших проектах. Вы можете выбрать один из 13 доступных наборов иконок, вы также можете настроить цветовую палитру и размер по своему усмотрению и дополнить внешней библиотекой, такой как Font Awesome. TinyToggle основан на веб-шрифтах, так как он прост в использовании и легок для включения в ваш проект.
14. prettyCheckable
Плагин jQuery для замены флажков и радио для пользовательских изображений. Особенности этого плагина:
- Совместимость с IE7 +, Chrome, Firefox, Safari и мобильными браузерами;
- Индивидуальный дизайн, любезно предоставленный Бруно О. Баррос;
- Четыре варианта цвета (начальная загрузка Twitter) + редактируемый PSD;
- Лучше выглядеть размер;
- Супер легкая реализация;
- Можно выбрать с помощью Tab и проверить с помощью клавиатуры;
- Изменить события Цепочка сохранена;
- Больше области щелчка / касания. Плюс для мобильных устройств.
13. iCheck Bootstrap
iCheck-bootstrap — это чистое решение CSS для отображения флажков в стиле начальной загрузки Twitter и переключателей. icheck-bootstrap основан на стилях начальной загрузки Twitter, поэтому убедитесь, что вы правильно связали таблицу стилей начальной загрузки в своем заголовке и используете структуру разметки по умолчанию:
Click to check
12. Флажок радио
Checkbox Radio — крошечный плагин jQuery, созданный filamentgroup создавать прогрессивно улучшенные радиокнопки и флажки.
11. Волшебный Ввод
Волшебный ввод — это потрясающая коллекция стилей CSS3 для флажков и переключателей, которые сделают ваши входы более красивыми, используя только один элемент и CSS.
10. Волшебная проверка
Magic Check — это крошечная библиотека CSS для украшения Radio and Checkbox. Он предлагает поддержку Chrome, Firefox, Safari, Opera и IE9 +.
9. Переключатель начальной загрузки
Преврати флажки и переключатели в тумблеры. Он предлагает поддержку IE9 + и всех других современных браузеров.
8. Флажок начальной загрузки
Bootstrap Checkbox — это очень простой и простой в использовании компонент флажка, основанный на платформе Bootstrap. Чтобы начать работу с этим плагином, просто включите копию bootstrap-checkbox.js
Сценарий в вашем документе:
Выберите элементы-флажки в jQuery, где вы хотите инициализировать компонент, и вызовите метод checkboxpicker:
$(':checkbox').checkboxpicker();
И все, мгновенно у вас будет замечательный переключатель да / нет вместо встроенных флажков браузера.
7. Красивая галочка
Prett Checkbox — это чистая библиотека CSS для украшения флажков и переключателей, JavaScript не требуется. Особенности:
- основной
- Формы — Квадрат, кривая, круглая
- Варианты — По умолчанию, Заполнить, Толстый
- Цвета — Первичное, Успех, Информация, Предупреждение, Опасность
- Типы цвета — Твердый, Контур
- Анимации — Гладкая, Тада, Желе, Пульс, Поворот
- Переключатель — стиль iOS — Outline, Fill, Slim
- отзывчивый
- Нет JavaScript
- Пользовательские иконки шрифтов
- SVG Иконки
- Поддержка изображений
- Переключаться между иконками / SVG’s / изображениями
- Замок
- Состояние — Фокус, Наведение, Неопределенный
- Поддерживает фреймворки — Bootstrap, Foundation, Sematic UI, Bulma, …
- Настройка SCSS
- Поддерживает все современные браузеры, включая мобильные устройства
- Печать дружественная
6. Labelauty
Labelautiy — очень удобный и легкий плагин jQuery, который придает красоту флажкам и переключателям и позволяет создавать собственные метки для каждого состояния (не) отмеченных входов. Чтобы инициализировать флажок с метками по умолчанию «Checked» и «Unchecked», по одному для каждого состояния ввода, вы можете просто использовать следующий код:
$(document).ready(function(){
$(":checkbox").labelauty();
});
Вы можете изменить метки по умолчанию (см. раздел «Настройки») или присвойте индивидуальные метки каждому флажку.
5. 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
Toggles — это легкий плагин jQuery, который создает легко переключаемые кнопки. Вам нужно указать класс для конкретной темы, которую вы хотите использовать. В этом случае мы используем toggle-modern. Класс toggle — это просто то, что мы будем использовать в качестве селектора для его инициализации:
Темы, которые мы могли бы использовать:
- мягкий
- свет
- темно
- iphone
- современный
Конечно, вы можете написать свои собственные темы / настроить стиль.
3. Bootstrap Toggle
Bootstrap Toggle — очень гибкий плагин Bootstrap, который преобразует флажки в переключатели. Для начала включите плагин в свой проект и просто добавьте data-toggle="toggle"
атрибут для преобразования флажков в переключатели.
2. я проверяю
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
Switchery — это простой компонент, который помогает вам превратить входные данные флажка HTML по умолчанию в красивые переключатели в стиле iOS 7 всего за несколько простых шагов. Вы можете легко настроить переключатели, чтобы они идеально подходили к вашему дизайну. Лицензировано по лицензии MIT. Поддерживаются все современные браузеры: Chrome, Firefox, Opera, Safari, IE8 +.
Если вам известен другой компонент с открытым исходным кодом, который заменит эти уродливые стандартные флажки браузера, поделитесь им с сообществом в поле для комментариев.