Демонстрация основных функций виджета jQuery DropDownList
Загрузка демо…
index.html
Образец услуги
Также доступен для:
СПРАВКА по APIКатегории: Товары: Доставить:
Компонент DropDownList является частью пользовательского интерфейса Kendo для jQuery, библиотеки пользовательского интерфейса профессионального уровня с более чем 110 компонентами для создания современных и многофункциональных приложений. Чтобы попробовать его, подпишитесь на бесплатную 30-дневную пробную версию.
Скачать бесплатную пробную версию
Описание
jQuery DropDownList позволяет отображать один выбор из списка вариантов и обеспечивает виртуализацию и настройку с помощью шаблонов.
В этой демонстрации вы можете увидеть DropDownList с включенными шаблонами и каскадными функциями.
Элемент управления Kendo UI для jQuery DropDownList является частью Kendo UI для jQuery, всеобъемлющей библиотеки пользовательского интерфейса профессионального уровня для создания современных многофункциональных приложений. Коллекция Kendo UI для jQuery содержит более 110 компонентов пользовательского интерфейса, множество гаджетов для визуализации данных, источник данных на стороне клиента и встроенную библиотеку MVVM (Model-View-ViewModel).
Этот пример DropDownList является частью уникальной коллекции из сотен демонстраций jQuery, с помощью которых вы можете увидеть все компоненты пользовательского интерфейса Kendo для jQuery и их функции в действии. Просматривайте исходный код демонстраций из библиотеки или напрямую адаптируйте и редактируйте их и их внешний вид в пользовательском интерфейсе Kendo для jQuery Dojo или ThemeBuilder.
Функциональность и особенности
- Привязка данных — позволяет привязать источник данных DropDownList либо к локальным массивам данных, либо к удаленным данным.
- Группировка. Функция группировки DropDownList позволяет отображать элементы данных, классифицированные по определенному полю модели.
- Server Filtering — вы можете управлять функциями фильтрации DropDownList и фильтровать данные на сервере.
- Виртуализация. Функция виртуализации повышает производительность при загрузке больших данных в DropDownList. Он использует фиксированное количество элементов списка во всплывающем списке независимо от размера набора данных.
- Шаблоны. Шаблоны DropDownList позволяют настраивать отображение элементов, выбранных значений и заголовков всплывающих окон
- Каскадирование. Функция каскадирования предоставляет возможность настраивать серию DropDownList, в которой элементы, загружаемые в каждый компонент DropDownList, зависят от выбора в предыдущем DropDownlist.
- Доступность — DropDownList доступен для программ чтения с экрана, поддерживает атрибуты WAI-ARIA и предоставляет сочетания клавиш для более быстрой навигации.
Ресурсы поддержки и обучения
- Обзор документации DropDownList
- API DropDownList
- Форумы DropDownList
- Пользовательский интерфейс Kendo для домашней страницы продукта jQuery DropDownList
- База знаний
Дополнительные ресурсы
- Пользовательский интерфейс Kendo для блога jQuery
- Пользовательский интерфейс Kendo для видео jQuery
- Пользовательский интерфейс Kendo для дорожной карты jQuery
- Пользовательский интерфейс Kendo для jQuery Цены
- Пользовательский интерфейс кендо для обучения jQuery
13 Плагины jQuery SelectBox/Dropdown — SitePoint
Эта популярная статья была обновлена 12 октября 2016 г. , чтобы отразить текущее состояние плагинов select/dropdown.
Стиль по умолчанию для выбранных элементов подходит не всем. Иногда вам может понадобиться управлять тем, как он выглядит (чтобы он оставался согласованным в разных браузерах и на разных устройствах), или вам могут понадобиться дополнительные функции, которые изначально не поддерживаются.
К счастью, существует множество отличных плагинов на основе jQuery, упрощающих этот процесс.
Мы рассмотрим набор плагинов, которые вы можете включить в свой следующий проект. Некоторые из этих плагинов легко настраиваются с помощью параметров, методов и событий, в то время как другие являются простой заменой выбранных элементов для стилизации и простоты использования.
Chosen
Chosen — это расширенный плагин, который не только изменяет стиль выбранных вами элементов, но и предоставляет дополнительные функции, такие как поиск в выбранном, выбор нескольких элементов и выделение.
Вы можете использовать этот плагин, если хотите обновить стиль выбранных вами элементов по умолчанию, но реальная сила здесь заключается в дополнительной функциональности:
- Возможность обрабатывать параметры множественного выбора.
Каждый выбор сохраняется и легко удаляется при необходимости
- Возможность фильтровать элементы поиском. Идеально подходит, когда у вас есть длинный список вариантов (например, названия стран)
С этим подключаемым модулем все работает, а поддержка рабочего стола возвращается к совместимости с IE8. Одним положительным (или отрицательным) фактором является то, что на мобильных устройствах элементы select возвращаются к своей исходной форме, позволяя мобильным браузерам контролировать ваше взаимодействие с ними.
В документации по параметрам описаны все параметры, методы и события, с которыми можно взаимодействовать для настройки элементов. Сам плагин поддерживается разработчиками, работавшими над инструментом управления проектами Harvest. Их репозиторий GitHub постоянно обновляется, в плагин добавляются дополнительные функции, исправления ошибок и оптимизации.
Веб-сайт / GitHub
Select2
Select2 — это полнофункциональный плагин для замены/улучшения выбора.
Подобно другим расширенным плагинам выбора, он содержит целую кучу настраиваемых функций, таких как:
Select2 находится в разработке с 2012 года. Разработчики перешли с версии 3 на версию 4 и в процессе переписали плагин, чтобы сделать его более быстрым, отзывчивым и удобным для мобильных устройств. Страница GitHub для Select2 впечатляет: с каждым выпуском надстройка работает лучше.
Плагин значительно больше ориентирован на разработчиков, а его страница параметров показывает исчерпывающие примеры того, как вы будете использовать каждую из различных функций.
Этот плагин обеспечивает высокий уровень настройки и является отличным решением, если вы ищете плагин, который можно настроить в соответствии с вашим проектом.
Веб-сайт/демонстрации/Github
jQuery Nice Select
Этот плагин представляет собой облегченную библиотеку замены select. jQuery Nice Select заменяет собственные элементы выбора по умолчанию выпадающими меню с измененным стилем.
В этом плагине нет ничего особенного, поскольку он предназначен для использования в качестве быстрого способа изменить стиль выбранных элементов, обеспечивая что-то визуально привлекательное без особых усилий. Плагин активно разрабатывается и улучшается в репозитории GitHub и отлично работает как в мобильных, так и в настольных браузерах.
Если вы ищете что-то быстрое и простое, которое только изменяет стиль выбранных вами элементов и не требует больших усилий, то этот плагин для вас.
Веб-сайт и демоверсии / Github
Selectize
Selectize — это полностью ориентированный на разработчиков плагин, который не только предоставляет вам более привлекательный список выбора, но также добавляет новые полезные функции, такие как теги, удаленная привязка данных и динамические выпадающие списки.
Подобно Select2 и Chosen, Selectize в значительной степени ориентирован на разработчиков, предоставляя вам контроль над тем, как будут работать ваши раскрывающиеся списки. Их документация довольно обширна и описывает ряд опций и несколько обратных вызовов, к которым вы можете подключиться для дальнейшей настройки плагина.
Плагин постоянно обновлялся, и за последний год разработчик выпустил несколько итераций. Иногда вы не уверены, активно ли поддерживается отличный плагин, который вы только что нашли, или он просто предоставлен «как есть», но для Selectize кажется, что проект все еще жив и работает, и почти все проблемы / отчеты об ошибках решаются и происходят довольно прозрачные обсуждения.
Функционально Selectize работает очень хорошо. Этот плагин не только изменяет стиль элементов управления по умолчанию, но также расширяет их за счет больших функций, таких как фильтрация поиска, возможность множественного выбора и удаленная привязка данных. Все это очень хорошо работает как в настольных, так и в мобильных браузерах.
Этот плагин является отличным выбором и должен быть одним из ваших основных вариантов, если вы хотите изменить стиль и расширить функциональность выбранных вами элементов.
Веб-сайт и демоверсии / GitHub
Поле со списком изображений
Поле со списком изображений — это простой плагин, который позволяет вам определить изображение и описание для каждой опции в выбранных элементах управления. Он в основном используется для демонстрации связанного изображения для каждого варианта, поэтому он полезен, когда вы хотите отобразить визуальное представление для каждого варианта.
Этот плагин имеет все основные функции, которые вы ожидаете, такие как навигация с помощью клавиатуры, набор событий для подключения и относительно простая разметка для пользовательского стиля.
Поле со списком хорошо работает в нескольких браузерах, однако оно давно не обновлялось, а на странице плагинов GitHub практически не было взаимодействия. Это не значит, что это плохой плагин, просто вам придется использовать его именно таким, какой он есть, и тщательно протестировать его в своем проекте, поскольку поддержка может оказаться сложной.
Если ваша главная цель — сделать так, чтобы вы могли отображать изображения и/или описания с выпадающими элементами, то этот плагин стоит посмотреть.
Веб-сайт / Демо / Github
jQuery Searchable DropDown Plugin
Searchable DropDown plugin — один из старых плагинов, которые вы можете найти в Интернете. Создан еще в 2012 году (и давно не обновлялся). Его цель состоит в том, чтобы преобразовать ваши основные элементы выбора в единый список с возможностью поиска.
У этого плагина нет веб-сайта, вместо этого он живет на SourceForge. Здесь не так много документации, кроме одной демонстрационной страницы, демонстрирующей, как это работает.
По сравнению с другими сильно расширяемыми плагинами для замены, этот кажется неуместным. Тем не менее, одна замечательная особенность этой библиотеки заключается в том, что она поддерживает все версии IE7 и хорошо работает как в настольных, так и (на удивление) мобильных браузерах.
Если вы ищете минимальную замену, которая позволяет сортировать, это может быть для вас
Веб-сайт / Демонстрация
Multi-select Combo Box
Этот плагин немного отличается от других, которые мы рассмотрели. Он работает с двумя или более выбранными элементами одновременно, создавая пользовательский интерфейс, в котором вы можете перемещать элементы между списками. Он похож на другие решения с перетаскиванием, но полностью состоит из стандартных элементов выбора. Чтобы все это заработало, вам, вероятно, придется немного стилизовать его, чтобы оно соответствовало современным стандартам дизайна (поскольку это немного уродливо) 9.0003
Этот тип элемента управления очень полезен, если вы хотите отсортировать список элементов между двумя или более контейнерами, например, для сортировки задач или организации содержимого.
На страницах Demo и GitHub описывается, как вы можете настроить это, и, поскольку есть несколько вариантов управления, кривая обучения довольно неглубокая.
Веб-сайт / Демо / GitHub
jQuery Selectbox
jQuery Selectbox — один из старых плагинов для замены select. Однако, в отличие от других плагинов, которые добавляют кучу функциональности, этот плагин в основном нацелен на изменение стиля ваших элементов управления и оставляет функциональность практически нетронутой.
jQuery Selectbox имеет несколько полезных параметров, которыми вы можете управлять, а также все стандартные события, которые вы ожидаете, такие как открытие, закрытие, выбор параметров и т. д. Поддержка браузера также является всеобъемлющей, поддерживает старые браузеры вплоть до IE7, но также вернуться к использованию системы по умолчанию на мобильных устройствах (если вы решите). Будучи старым плагином, он, вероятно, не изменится в ближайшее время. Разработчик, поддерживающий плагин, не был активен в течение многих лет, поэтому на данный момент он предоставляется «как есть».
Сила этого плагина заключается в его упрощенном стиле, позволяющем вам легко заменить его собственным стилем, чтобы он соответствовал вашему дизайну. Если вы хотите сделать что-то простое, например, стилизовать раскрывающиеся списки и, возможно, настроить несколько параметров, то этот плагин может быть именно тем, что вам нужно.
Веб-сайт и демонстрация / GitHub
Multiselect.

Еще одна библиотека на основе jQuery, которая позволяет быстро и легко создавать списки на основе множественного выбора. Легко понять, насколько они полезны, когда демонстрируются их демонстрации. Вы можете создать один элемент выбора, а затем легко перемещать элементы между списками.
Плагин довольно часто обновляется его разработчиком, а на странице GitHub есть куча закрытых/разрешенных тикетов.
Хотя на некоторые из последних проблем, отмеченных на GitHub, не было ответа, сам плагин довольно надежен с рядом опций, методов и событий, к которым вы можете подключиться. Он хорошо работает в нескольких браузерах и содержит несколько стилей (что позволяет вам легко указать, как он должен выглядеть).
Это хорошая отправная точка, если вам нужен простой плагин с множественным выбором.
Веб-сайт / GitHub
JQuery SumoSelect
SumoSelect обладает всеми функциями, необходимыми для замены списка выбора. Этот плагин обрабатывает как элементы с одним, так и множественным выбором, а также поиск и фильтрацию, поддерживаемые солидным набором параметров и событий.
Внешний вид SumoSelect легкий, с акцентом на минималистский стиль, который вы можете настроить для своих проектов. Есть несколько демонстраций, которые демонстрируют, как можно настроить все различные параметры.
Этот плагин постоянно улучшался в течение последних нескольких лет, и с каждой версией он становился лучше. В отличие от других плагинов, от которых можно отказаться и оставить «как есть», похоже, этот будет становиться лучше с каждой новой версией.
Другим заслуживающим внимания элементом является то, что этот плагин обеспечивает всестороннюю поддержку браузера. SumoSelect будет работать еще с IE8 на настольных компьютерах и обеспечивать поддержку мобильных устройств, либо работая нормально, либо возвращаясь к родным элементам управления (в зависимости от параметров, которые вы указали при настройке).
Веб-сайт/демонстрации/GitHub
Здесь немного другое. В отличие от других независимых плагинов, таких как Chosen или Select2 (которые, хотя и популярны, но не очень широко распространены), этот плагин является частью инфраструктуры пользовательского интерфейса jQuery в виде расширяемого виджета, называемого selectmenu
. Виджеты пользовательского интерфейса jQuery являются расширениями, ориентированными на разработчиков. которые вы можете интегрировать в свой собственный проект. Эти виджеты были тщательно разработаны и очень стабильны, поддерживаются рядом параметров, методов и событий, к которым вы можете подключиться, чтобы настроить его работу.
Целью Selectmenu является расширение функциональности и дизайна собственных элементов выбора. Эти элементы полностью настраиваемые и основаны на CSS-фреймворке jQuery UI. Хотя он не имеет всех функций других более крупных плагинов (таких как фильтруемый поиск, анимация или привязка данных JSON), он имеет мощную кросс-браузерную поддержку и постоянные обновления.
Эта библиотека будет полезна в ситуациях, когда вы хотите быстро стилизовать выбранные элементы в соответствии с темой пользовательского интерфейса jQuery или вам нужна обширная библиотека, которую вы можете настраивать и адаптировать самостоятельно.
Веб-сайт и демонстрация
jQuery Filterable Bootstrap Select
Filterable Bootstrap Select — это плагин, который расширяет стиль выбора по умолчанию, предоставленный в Bootstrap 3.
Этот плагин связывает вместе несколько ресурсов, таких как FontAwesome для значков, jQuery LiveFilter для фильтрации механика, а также jQuery tabcomplete для автоматического прогнозирования.
Как и в случае с большинством других плагинов, есть ряд опций, которые вы можете настроить в соответствии со своими потребностями. Он должен предоставить все, что вам нужно, чтобы базовый фильтруемый список работал на вас.
Сам основной плагин находится на GitHub и время от времени обновляется в течение года. Однако с большинством проектов, поддерживаемых одним человеком, вы никогда не знаете, когда и сможете ли вы получить поддержку. Если вы довольны тем, как работают демоверсии, и хотите использовать их «как есть», тогда это отличный ресурс, если вы уже работаете над сайтом на основе Bootstrap.
Demo / GitHub
DDSlick jQuery DropDown
DDSlick преобразует выбранные вами элементы в выпадающие меню с легким стилем. Каждая опция содержит свой обычный заголовок и значение, а также дополнительное изображение и описание.
Существует несколько различных параметров, которые можно настроить, а также события, к которым можно подключиться для дальнейшей настройки.
Одна из реальных проблем заключается в том, что веб-сайт не работает , и все примеры на странице вызывают ошибки. Похоже, что все ресурсы указывали на учетную запись DropBox, которой больше не существует. Однако сам скрипт не утерян, и его копии есть на нескольких сайтах, включая JSDeliver.
Обычно мы пропускаем плагины с неработающими демонстрационными страницами. Однако этот плагин работает очень хорошо, и его документация надежна. Это хороший плагин, если вам интересно:
- Динамическая привязка выбранных значений из массива JSON (позволяет динамически определять параметры)
- Отображение изображения, описания и заголовка для демонстрации каждой опции (с несколькими макетами)
- Настройка вашего кода с обратными вызовами
Если вы хотите увидеть, как это работает, вы можете буквально скопировать и вставить HTML-код веб-сайта и соответствующие образцы JS на веб-сайт игровой площадки JS, такой как Codepen. io, и все это будет работать (при условии, что вы ссылаетесь как на jQuery, так и на основной JS-файл плагина). ).
Веб-сайт
Подведение итогов
Теперь есть широкий выбор сменных плагинов. За последние несколько лет несколько наиболее популярных библиотек были доработаны, добавлены новые функции и улучшено их функционирование в целом.
Вам нужно просмотреть различные библиотеки, о которых я упомянул сегодня, и посмотреть, какая из них больше всего соответствует вашим потребностям. Например, если вы просто хотите изменить стиль выбранных элементов, действительно ли вам нужна библиотека, которая также предлагает фильтрацию и удаленную привязку данных?
Большинство из этих библиотек должны быть установлены и запущены относительно быстро. Большинству из них нужен только jQuery и связанные с ним файлы плагинов, и все готово.
Если вы заинтересованы в настройке параметров или подключении к обратным вызовам, вам может потребоваться выбрать библиотеку, более ориентированную на разработчиков, например Selectize, Chosen или Select2.