20 плагинов jQuery, заменяющих окно выбора

1. 1. Красивые выпадающие
2. 2. Выберите Выбрать
3. 3. InputPicker
4. 4. Выберите 2
5. 5. Сладкий выпадающий
6. 6. Удивительный выбор
7. 7. JQuery Dropdown
8. 8. Combo Select
9. 9. Нечеткий выпадающий
10. 10. DDList
11. 11. ddSlick
12. 12. Выпадающие флажки
13. 13. Выбор иерархии
14. 14. Selectric
15. 15. Sumo Select
16. 16. Быстрый выбор
17. 17. Селектизировать
18. 18. Легкий вес Выбрать
19. 19. BetterSelecter
20. 20. Выберите меня
21. Заключение

Традиционный элемент выбора HTML не очень мощный из коробки, ему не хватает более существенных функций. Сегодня Интернет требует элементов управления с множеством функций для удобства пользователей, и традиционное окно выбора HTML просто не может конкурировать. Такие функции, как множественный выбор, группировка, иерархические списки и пользовательская разметка HTML, облегчают работу над проектами и задачами, а в HTML-боксе этих функций нет.
Написание собственной реализации этих функций потребует больших усилий, и тестирование совместимости с браузерами может стать кошмаром. К счастью, jQuery предлагает множество плагинов, чтобы избавить вас от этих хлопот. Этот пост содержит скомпилированный список из 20 впечатляющих плагинов jQuery, которые заменяют традиционное поле выбора HTML элегантным, стильным и многофункциональным блоком выбора. Эти плагины jQuery предлагают различные функции, такие как изменение стилей по умолчанию, добавление функции поиска, группирование элементов, создание иерархий, навигация с помощью клавиатуры, выбор нескольких элементов и многие другие функции.

1. Красивые выпадающие

https://github.com/thdoan/pretty-dropdowns

Pretty Dropdowns - это простой и легкий плагин jQuery, который преобразует раскрывающиеся меню <select> в «довольно» меню, которые вы можете создавать с помощью CSS. Особенности:

• Два стиля и размера стрелок на выбор (или добавьте свой собственный стиль)
• Легко добавляйте значки, эскизы и другие пользовательские HTML-элементы в пункты меню
• Поддержка нескольких списков выбора
• Поддержка опционных групп
• Всплывающие подсказки (заголовок) переносятся на уровни select, option и optgroup
• Полная клавиатурная навигация (вы даже можете перейти непосредственно к пункту меню, набрав его текст!)
• Автоматическая привязка к ярлыку (меню будет выделено при нажатии на ярлык)
• Доступность (он прекрасно работает с программами чтения с экрана)
• Чувствительность (когда вы открываете меню, он делает все возможное, чтобы элементы меню находились в области просмотра)
• Полный контроль над внешним видом выпадающего меню путем изменения prettydropdowns.css

2. Выберите Выбрать

http://project.zyy1217.com/selectpick/

SelectPick - это быстрый, простой, настраиваемый и легкий плагин jQuery для настройки раскрывающегося списка HTML с пользовательским стилем. Прелесть этого плагина в том, что он может быть применен к любому типу HTML, а не только к блоку выбора HTML. Особенности включают в себя:

• Возможность привязки к нескольким типам элементов HTML
• Настраиваемые источники данных
• Поддержка Ajax асинхронного доступа к данным
• Предоставление опций и маркировка отключить функции
• Динамическая настройка выбранных элементов
• Настройка стиля пользователя

3. InputPicker

https://github.com/ukalpa/inputpicker

InputPicker - это входной плагин jQuery, который преобразует текстовое поле ввода в фильтруемое выпадающее меню с несколькими столбцами. При запуске этот плагин добавляет элемент div ниже поля ввода и стилизует его с помощью классов CSS по умолчанию. Он поддерживает как локальные данные (массив данных), так и удаление источников данных (JSON) через запросы AJAX. Плагин также дает разработчикам возможность гибко изменять ширину и высоту.

4. Выберите 2

https://select2.github.io/

Select2 - это замена jQuery для традиционных полей выбора. Select2 предоставляет настраиваемое поле выбора с поддержкой поиска, тегов, удаленных наборов данных, бесконечной прокрутки и многих других часто используемых параметров. Особенности:

• Более 40 языков и поддержка RTL.
• Полностью скины CSS, созданные с помощью Sass и дополнительной темы для Bootstrap 3.
• Полная расширяемость для работы именно так, как вы хотите
• Динамическое создание предметов
• Поддержка как современных, так и устаревших браузеров

5. Сладкий выпадающий

http://sweet-dropdown.adepto.as/

Sweet Dropdown - простой плагин jQuery, который создает гибкие и анимированные выпадающие списки в любом направлении с любым видом контента. Он также поддерживает добавление значков для выбора элементов, а также возможность применять темные или светлые темы для стиля. Этот плагин работает во всех основных браузерах.

6. Удивительный выбор

https://github.com/prevwong/awesome-select

Awesome Select - это красивый и настраиваемый плагин jQuery для преобразования скучного тега select в нечто красивое и минималистичное с анимациями, вдохновленными Material Design. Вы можете изменить внешний вид выпадающего меню в зависимости от вашего вкуса. Этот плагин также поддерживает режим погружения, который позволяет отображать выпадающий список в модальном окне, охватывающем весь экран. Анимации основаны на свойствах преобразования и перехода CSS3.

7. JQuery Dropdown

https://github.com/daneWilliams/jquery.dropdown

jQuery Dropdown - это гибкий плагин jQuery для нескольких устройств, который заменяет выбор HTML и многоуровневые меню анимированными выпадающими списками выбора. Этот плагин позволяет создавать простые, множественные, вложенные, сгруппированные и настраиваемые выпадающие списки содержимого HTML. Плагин позволяет переопределить настройки по умолчанию для анимации, навигации по клавиатуре, выбора нескольких элементов и других настроек по умолчанию.

8. Combo Select

https://github.com/PebbleRoad/combo-select

Combo Select - это плагин jQuery, который преобразует поле выбора в удобный для поиска интерфейс с поддержкой клавиатуры. Плагин создает элемент div и стилизует его, используя CSS по умолчанию. Он также присоединяет событие нажатия клавиш для захвата нажатий клавиш для фильтрации выбора. Другим преимуществом этого плагина является то, что он возвращается к собственному выбору на мобильных устройствах и устройствах iPad. Особенности:

• Поиск и фильтрация, выбор предметов
• Мобильность и удобство для планшетов (откат к родному выбору)
• Доступность клавиатуры
• Легкость стиля
• Поддержка атрибутов данных
• Поддержка числовых и строковых типов данных в select
• Поддержка неявных атрибутов стиля

9. Нечеткий выпадающий

https://github.com/zeusdeux/fuzzy-dropdown

Fuzzy-dropdown - это плагин jQuery, который преобразует блок выбора в нечеткий выпадающий список. Нечеткое сопоставление строк - это метод поиска строк, которые соответствуют шаблону приблизительно, а не точно. Нечеткое раскрывающееся меню делегирует взаимодействия базовому полю выбора. Кроме того, раскрывающийся список полностью доступен для навигации с помощью клавиш со стрелками. Fuzzy-dropdown сам по себе не делает стайлинг. Все стили управляются с помощью CSS. Это дает вам полную свободу для стилизации вашего раскрывающегося списка, как вы хотите.

10. DDList

http://code.cwwonline.be/serviceddlistjquery

DDlist - это легкий плагин jQuery, который позволяет создавать стильный выпадающий список, поддерживающий параметры списка с текстом, изображениями и дополнительными строками описания. Этот плагин скрывает элемент select, и список «восстанавливается» с помощью сгенерированного jQuery списка <ul> внутри контейнера <div>. Параметры элемента select также могут быть определены с помощью объекта массива JSON. Плагин поставляется с файлом CSS, который содержит различные классы для представления внутренних элементов и их стилей, давая вам возможность изменить существующий стиль в соответствии с дизайном вашего сайта.

11. ddSlick

http://designwithpc.com/Plugins/ddSlick

Всегда хотел выпадающий с изображениями? Ну, теперь у вас есть плагин для этого! ddSlick - это бесплатный и легкий плагин jQuery, который позволяет создавать собственные выпадающие меню с изображениями и описаниями.

• Добавляет изображения и описания к другим мягким выпадающим спискам
• Позволяет JSON заполнять раскрывающиеся параметры
• Преобразует ваш HTML-элемент выбора в ddSlick
• Использует минимальный CSS и никаких внешних таблиц стилей для загрузки
• Поддерживает функции обратного вызова при выборе

12. Выпадающие флажки

https://github.com/creativecirclemedia/dropdown-checkboxes

Dropdown checkboxes - это простой плагин jQuery, который превращает выпадающий компонент начальной загрузки в компактный выпадающий список с несколькими флажками. Этот плагин создает скрытый элемент ввода. Когда значения проверены и сохранены, плагин создает JSON-массив всех проверенных значений и присваивает его скрытому полю ввода. Этот плагин также позволяет предварительно установить флажки при загрузке страницы. Когда текстовые значения выбранного флажка выходят за пределы определенной длины, тогда плагин обрезает строковое значение для лучшего расположения пользовательского интерфейса.

13. Выбор иерархии

https://github.com/NeoFusion/hierarchy-select

Hierarchy Select - это легкий плагин jQuery, который преобразует выпадающий список Bootstrap в выпадающий список с возможностью фильтрации. Этот плагин хорошо работает как для простых выпадающих меню, так и для иерархических выпадающих, с возможностью поиска. Вам нужно определить элемент ввода чуть выше элемента select. Плагин использует этот элемент ввода для создания функции поиска для поля выбора. Он присоединяет событие keyup к блоку ввода и реагирует на взаимодействие с клавиатурой. Для поиска текста, он использует индекс() функция, которая возвращает позицию первого вхождения указанного значения в строке.

14. Selectric

http://selectric.js.org/

Selectric - это быстрый, простой и легкий плагин jQuery, разработанный для того, чтобы помочь в стилизации и манипулировании традиционными элементами выбора HTML. Он также позволяет выбрать несколько элементов и добавить значки для выбора элементов списка. Особенности:

• Навигация с клавиатуры (вверх / вниз / влево / вправо / поиск слова)
• Простая настройка
• Постоянно видимое окно настроек
• Независимость от внешних библиотек (кроме jQuery)
• Совместимость поиска слов с набором символов западной латинской
• 10 встроенных тем
• Возможность динамического добавления предметов для выбора элемента
• Поддержка различных обратных вызовов для настраиваемой обработки
• Опции для заполнения данных через Ajax
• Поддержка пользовательской разметки HTML

15. Sumo Select

http://hemantnegi.github.io/jquery.sumoselect/

Sumo Select - это красивый jQuery-плагин для нескольких устройств, который постепенно расширяет возможности HTML Select Box в раскрывающемся списке «Один / несколько вариантов». Выпадающий список можно полностью настроить с помощью простого CSS. Он может адаптироваться под любое устройство, сохраняя удобство работы с пользователем. Особенности:

• Один и несколько вариантов выбора
• Поиск поддержки
• Поддержка Optgroup
• Поддержка локализации
• Полная настройка простым CSS
• Поддержка практически всех устройств
• Интеллектуальный рендеринг в соответствии с устройством
• Рендеринг собственных / множественных всплывающих окон на Android, iOS, Windows и других устройствах
• Пользовательский формат данных обратной передачи
• Выбрано, Отключено, Выбрать все, навигация с помощью клавиатуры и поддержка заполнителей
• Переработанный интерфейс (внешние значки теперь не используются, а цветовую схему можно контролировать с помощью CSS)
• Простая расширяемость, позволяющая разработчикам создавать новые виджеты

16. Быстрый выбор

http://dbrekalo.github.io/fastselect/

Fastselect - это легкий плагин для расширенных элементов выбора, основанный на jQuery. Он обеспечивает быстрое и разумное обновление пользовательского интерфейса выбранных элементов с такими функциями, как поиск параметров и удаленная загрузка набора данных. Он весит менее 5 КБ (минимизированный и сжатый). Он предоставляет такие функции, как поиск, фильтрация, тегирование, одиночный выбор, множественный выбор, автозаполнение и динамическое содержимое AJAX.

17. Селектизировать

http://selectize.github.io/selectize.js/

selectize.js - это легкий плагин для создания надежного и удобного списка выбора с чистыми и мощными API. Это полезно для тегов, списков контактов, селекторов стран и так далее. Он работает примерно на 7 Кб (в сжатом виде). Особенности:

• Скинируемость - поставляется с LESS таблицами стилей и прокладками для Bootstrap 2 и Bootstrap 3.
• Чистый API, код и расширяемость
• Интеллектуальный рейтинг / поиск и сортировка по нескольким объектам - параметры эффективно оцениваются и сортируются на лету
• Каретка между предметами - используйте клавиши со стрелками влево и вправо для перемещения между предметами
• Выберите и удалите несколько элементов одновременно
• RTL поддерживается - отлично подходит для международных сред
• Создание предметов - позволяет пользователям создавать предметы на лету
• Удаленная загрузка данных

18. Легкий вес Выбрать

https://github.com/keyo321/jQueryLightWeightMultiSelect

Это сверхлегкий плагин jQuery, который преобразует раскрывающееся меню с множественным выбором в простой интерфейс выбора из двух панелей. Пользовательский интерфейс полностью контролируется с помощью CSS, так что вы можете изменить внешний вид в соответствии с вашими потребностями. Размер плагина составляет 4 КБ после минификации, 2 КБ для CSS и 2 КБ для значка с двойной стрелкой.

19. BetterSelecter

https://github.com/BenMMcLean/BetterSelecter

BetterSelecter - это простой, понятный и простой в использовании плагин jQuery для преобразования стандартного поля выбора HTML в стильное и изящное поле выбора с возможностью поиска. Стиль управляется с помощью CSS-классов, что дает вам гибкость в изменении дизайна в соответствии с вашими требованиями. Этот плагин добавляет элемент div с span внутри, чтобы создать поле выбора с возможностью поиска и отобразить выбранное значение.

20. Выберите меня

https://github.com/bschueller/jquery.selectMe

selectMe - плагин выбора замены на основе jQuery, который заменяет большой элемент выбора в аккуратное решение с возможностью поиска. Он также может добавить флажок или переключатель к элементам для лучшего выбора элемента. Поддерживает:

• Поиск конкретных элементов
• Выбор или отмена выбора всех элементов, которые отображаются в данный момент
• Показать только выбранные элементы
• Optgroups
• Навигация по элементам с помощью клавиш со стрелками (вверх + вниз)
• Выбор элементов с помощью пробела
• Переход непосредственно в поле поиска при нажатии клавиши во время навигации в раскрывающемся списке

Заключение

Эти легковесные и настраиваемые плагины jQuery позволяют превратить обычные элементы выбора HTML в стильные и изящные элементы выбора. Эти плагины предлагают различные мощные функции, такие как поиск, группировка, пользовательская разметка HTML, навигация с клавиатуры, удаленная загрузка данных, поддержка RTL, выбор нескольких элементов и другие небольшие, но удобные функции. Другое преимущество состоит в том, что все плагины используют простые CSS-классы для стилизации элементов выбора. Это дает разработчикам возможность переопределить или изменить стиль плагина по умолчанию на собственную реализацию стиля.

Похожие

Комментарии