Эта статья была рецензирована Мартином Мартинесом и Крисом Перри . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Вы когда-нибудь работали над проектом, и казалось, что что-то не так визуально? Может быть, проект был почти завершен, но некоторые элементы выглядели не так хорошо? Это могут быть мелкие детали, но они имеют значение.
Если ваш проект содержит непривлекательные блоки выбора и вы хотите добавить к ним больше функций, вы найдете Chosen и Select2 очень полезными. Это два плагина jQuery, которые помогают стилизовать ваши блоки выбора, чтобы улучшить их внешний вид, настроить их поведение и сделать их более удобными для пользователя.
В этой статье я расскажу об этих двух подключаемых модулях и сравню их функции и варианты их использования, чтобы вы могли сделать осознанный выбор того, что лучше для вас.
Установка
И Chosen, и Select2 доступны через GitHub. Это означает, что вы можете клонировать соответствующий репозиторий и получить нужные вам файлы.
git clone https://github.com/harvesthq/chosen.git git clone https://github.com/select2/select2.git В противном случае вы можете установить оба плагина с помощью Bower (который служит интерфейсом для GitHub). Если Bower — ваш предпочтительный маршрут, вы можете также взять jQuery, пока вы на нем.
bower install jquery bower install select2 bower install chosen
В противном случае, возьмите файлы с вашего CDN по вашему выбору (например, CDNJS ) и включите их в вашу страницу в обычном порядке. Это то, что я сделал в шаблонах ниже, которые вы можете использовать, чтобы следовать вместе с примерами в руководстве.
Избранный
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chosen/Select2 Template</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"> </head> <body> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> <script>// Additional logic goes here</script> </body> </html>
выбор2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Select2 Template</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css"> </head> <body> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <script>// Additional logic goes here</script> </body> </html>
Активно ли поддерживаются проекты?
Как вы можете сказать, посетив его страницу GitHub, разработка плагина Chosen не так активна, как когда-то, и последняя версия Chosen датируется 6 февраля 2014 года. Это не означает, что библиотека была заброшена — далеко от него! Скорее разработчики получили его туда, где они хотят, и он остается надежным и надежным плагином.
Сравните это с Select2 с другой стороны, и разница заметна. Разработка этой библиотеки идет полным ходом, и недавно она выпустила свою четвертую официальную версию (4.0.0). Это означает, что добавляются новые функции, а другие устаревают и / или удаляются.
Другой полезной метрикой может быть количество вопросов с этими тегами в переполнении стека. Вы можете попробовать это сами здесь: http://stackoverflow.com/tags
Если вы введете «Select2», а затем сопоставите его с «Chosen», вы увидите, что вокруг плагина Select2, похоже, гораздо больше активности. Вы также увидите, что он имеет ряд интеграций, например, с AngularJS и Ruby on Rails .
Выберите поля и заполнители
Select2 и Chosen изменяют способ отображения простых и множественных полей выбора.
В нескольких полях выбора с чистым HTML пользователи могут видеть некоторые опции, доступные в списке. Это не является визуально привлекательным, и в это представление необходимо внести изменения. Chosen и Select2 удаляют «представление списка», и список опций появится, когда вы щелкнете внутри поля выбора. Только тогда вы можете сделать выбор.
Вы можете искать ваши варианты с обоими плагинами. Просто щелкните внутри поля и введите первые символы по вашему выбору, тогда результаты будут отображаться в реальном времени в соответствии с вашим поиском.
Select2 облегчает отмену выбора уже выбранных параметров. Когда раскрывающийся список открыт, вы можете щелкнуть любой выбранный элемент, чтобы отменить его выбор. Выбранный еще не реализовал эту функцию.
И Chosen, и Select2 поддерживают текст-заполнитель для одного и нескольких блоков выбора.
Ограниченное количество выборов
Иногда в окне множественного выбора необходимо ограничить количество вариантов, которые выбирают пользователи. Преимущество использования Chosen и Select2 состоит в том, что вы можете очень легко изменить количество выборов.
max_selected_options: 2 // Chosen Plugin
maximumSelectionLength: 2 // Select2 Plugin
Вы можете ограничить количество выборов, которые можно выбрать из поля множественного выбора с обоими плагинами, хотя стоит отметить, что версия этой функции в Chosen является более продвинутой. После того, как вы достигли лимита, при попытке выбрать дополнительную опцию вызывается событие.
В этом примере пользователям предлагается выбрать два дня, которые являются наиболее продуктивными за неделю. Когда они попытаются выбрать третий день, Chosen будет называть событие. Я установил Chosen, чтобы добавить alert показывающее, что предел достигнут:
Адаптивный дизайн
Люди будут видеть ваши страницы на всевозможных устройствах, поэтому флажки, как и другие компоненты вашего сайта, должны быть отзывчивыми. И Chosen, и Select2 поддерживают настройку width с процентом, и эта функция практически одинакова на обоих. Это помогает создавать адаптивные поля выбора, которые учитывают размер экрана или ширину окна браузера.
Единственное отличие Chosen и Select2 в этой функции — это код. Вы можете объявить width Select2 внутри тега select в HTML. См. Ниже, чтобы понять, насколько удобно сделать поля выбора отзывчивыми и визуально лучше с Chosen и Select2.
<!-- Chosen - HTML --> <select class="responsiveChosen"> ... </select>
// Chosen - JavaScript $(".responsiveChosen").chosen({width: "50%"});
<!-- Select2 - HTML --> <select class="responsiveSelect2" style="width:50%"> ... </select>
// Select2 - JavaScript $(".responsiveSelect2").select2();
Другие подобные функции
У Chosen и Select2 есть и другие общие функции, но я бы хотел взглянуть на три функции, которые мне показались интересными: отключенные результаты, скрытое окно поиска и поддержка справа налево (RTL).
Отключенные результаты
Наиболее интересным из них является отключение результатов. Когда эта опция установлена, Chosen и Select2 выделяют включенные опции. Вы можете видеть отключенные варианты, но не можете их выбирать. Отключенные результаты обычно устанавливаются так, чтобы пользователь не мог выбрать параметр, пока не будет выполнено какое-либо другое условие. Эта функция превращает ваши блоки выбора в мощный инструмент и увеличивает взаимодействие с пользователем, если вы научитесь использовать его в соответствии с вашими потребностями.
Чтобы плагины знали, что вы активировали отключенные результаты, добавьте атрибут disabled="disabled" в тег option где вы будете использовать эту функцию.
<option value="1" disabled="disabled">Product A</option>
В этом выбранном примере пользователь может выбирать только параметры, доступные в его географическом местоположении, но он также может видеть другие параметры, даже если они недоступны:
Скрытие окна поиска
Если у вас не так много вариантов в списке параметров в отдельных полях выбора, рекомендуется скрыть окно поиска. В Chosen , чтобы скрыть окно поиска, вы должны использовать disable_search_threshold и установить для него большее значение, чем количество опций в вашем окне выбора.
... <option value="1">Yes</option> <option value="0">No</option> <!--2 options--> ...
// Chosen - JavaScript ... disable_search_threshold: 3 ...
Та же логика применима к Select2 , но единственным изменением является терминология, а вместо disable_search_threshold она называется minimumResultsForSearch .
// Select2 - JavaScript ... minimumResultsForSearch: 3 ...
Одна вещь, которую я должен добавить о Select2, это то, что вы можете навсегда скрыть окно поиска, не беспокоясь о количестве опций, которые есть в вашем окне выбора. Вы можете сделать это, установив для minimumResultsForSearch значение Infinity .
minimumResultsForSearch: Infinity
Поддержка справа налево (RTL)
Большое количество веб-сайтов написано на разных языках с разными алфавитами, кроме того, некоторые из этих языков читаются в другом направлении. Желательно, чтобы поля выбора соответствовали правилам этих языков и сместили их направление с LTR (слева направо) на RTL. Это улучшает пользовательский опыт и повышает удобство использования вашего веб-сайта для пользователей этого региона.
И Chosen, и Select2 поддерживают технику справа налево в полях выбора. Единственное отличие, которое у них есть, заключается в том, что Select2 требует, чтобы вы объявили поддержку RTL в файле JavaScript, в то время как в Chosen вы просто добавляете класс selected chosen-rtl вместе с выбранным классом Chosen в HTML.
Почему Pick Select2 более выбран
В то время как Select2 был вдохновлен Chosen и имеет большинство функций Chosen, его участники не остановились на этом. Они встроили некоторые из самых классных функций для блоков выбора, включая программный доступ , создание шаблонов , отключенный режим , тегирование и токенизацию . Также есть поддержка AJAX .
Программный доступ
Программный доступ переводит поля выбора на другой уровень. Они очень полезны в сочетании с несколькими полями выбора. Вы можете добавить кнопки, которые действуют на эти поля выбора в соответствии с вашими правилами, используя JavaScript.
Если некоторые из опций в окне множественного выбора имеют логическую связь друг с другом, и, по вашим наблюдениям, эти «связанные» опции имеют большую вероятность выбора из большого числа пользователей, тогда полезно выбрать эти варианты с помощью один клик.
<select class="progControlSelect2" multiple="true"> <option value="js">JavaScript</option> <option value="ph">PHP</option> <option value="jv">Java</option> <option value="rb">Ruby</option> <option value="sw">Swift</option> <option value="oc">Objective C</option> <option value="py">Python</option> </select> <form> <input type="button" class="iOSSelect2" value="Set iOS Technologies"> ... </form>
var $progControl = $(".progControlSelect2").select2({ placeholder: "What technologies do you use most of the time" //placeholder }); $(".iOSSelect2").on("click", function () { $progControl.val(["sw", "oc"]).trigger("change"); });
В этом примере вы можете быстро установить «Swift» и «Objective-C», нажав кнопку «Технологии iOS»:
Tagging
Пометка тегов — это еще одна функция Select2, которая делает блоки выбора более мощными и расширяет границы обычных блоков выбора. Это позволяет пользователям добавлять новые варианты, которых еще нет в списке параметров.
Пометка также очень удобна в тех случаях, когда диапазон выбора очень велик, и вы не можете набрать все варианты в списке параметров. Когда тегирование включено, и пользователи не могут найти свой выбор в списке, оно «подталкивает» их к созданию тега по своему выбору.
Будьте осторожны при использовании тегов, так как «злонамеренные» пользователи могут неправильно использовать их, вводя недопустимые теги, которые не соответствуют цели поля выбора.
Чтобы включить тегирование, вы должны установить для tags значение true .
$(".taggingSelect2").select2({ ... tags: true, });
лексемизацию
Как только для tags установлено значение true , становится доступной опция включения разделителей токенов . После ввода имени тега просто введите один из указанных разделителей токенов. Затем тег вводится в качестве выбора в списке параметров. Разделители токенов служат в качестве ярлыков для создания тегов путем ввода символов с клавиатуры.
С помощью Select2 вы можете создавать разделители токенов с любым нужным вам символом. В следующем примере используются четыре разделителя токенов: / ,,, ; и " " (пробел).
$(".tokenizationSelect2").select2({ placeholder: "Your favourite car", //placeholder tags: true, tokenSeparators: ['/',',',';',' '] });
Попробуйте, набрав новый параметр, а затем один из символов-разделителей, чтобы выбрать его и добавить в список параметров:
Шаблонирование
Одной из самых мощных функций Select2 является создание шаблонов . Шаблонирование позволяет нам настраивать внешний вид компонентов, отображаемых в Select2. Эта функция может использоваться для объединения минимального ввода, который обеспечивается тегом option с изображениями или другими компонентами для создания визуального отображения для пользователя.
В этом примере сочетается шаблонирование Select2 с глификонами Bootstrap :
Вывод
Хотя у Chosen есть несколько приятных опций, Select2 предлагает гораздо больше с точки зрения доступных функций для использования с полями выбора. Выбранный вариант является хорошим вариантом, если вы объединяете его в «потоке» своего веб-сайта, но если вы хотите получить доступ к более продвинутым функциям, тогда Select2 — лучший выбор.
Я настоятельно рекомендую использовать Select2; он обновляется чаще, чем Chosen, и содержит меньше ошибок. Одна вещь, которую я нашел очень полезной в Select2 — это документация. Пока вы читаете его, вы можете использовать компоненты Select2 в своем проекте на лету.
Если у вас были хорошие или плохие впечатления от использования Chosen или Select2, дайте мне знать в разделе комментариев ниже.