ProfiPHPProfiPHP
Категория: jQuery

Плагин Chosen

Опишем очень удобный и полезный плагин jQueryChosen, который позволяет пользователям быстро и удобно управлять списками, осуществлять мгновенный поиск и одновременный множественный выбор параметров. Кроме поиска, пользователь вместо стандартного дизайна списка увидит красивое и очень удобное стилистическое решение.

Страница плагина - Chosen

Кратко опишу для чего нужно использовать плагин Chosen.

Например, если в списке присутствует несколько десятков пунктов, можно очень быстро найти нужный, воспользовавшись поиском по первым или другим присутствующим буквам. Реализация поиска экономит значительное время для пользователей.

Плагин Chosen предоставляет возможность пользователям выбирать несколько значений списка одновременно. Выбор значений также можно очень быстро осуществить благодаря встроенному поиску по буквам, который работает в режиме реального времени.

Также плагин Chosen позволяет создавать красивые подпункты в списках.

После скачивания файлов плагина Chosen их необходимо подключить:
<script type="text/javascript" src="/js/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="/js/chosen/chosen.min.css" />
Можно подключать и полные версии без приставки .min, которые позволяют в читабельном виде просматривать и редактировать исходный код.

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Опишем основные параметры функции:

Width - ширина выбранного поля выбора. По умолчанию ширина списка соответствует ширине окна, в котором он используется;

Disable_search - когда установлено значение True, Chosen не будет отображать поле поиска (только одиночные выборы);

Disable_search_threshold - скрыть вход для поиска по одиночным выборкам, если имеется n ( по умолчанию 0) или менее параметров;

Max_selected_options - ограничивает количество параметров, которые пользователь может выбрать. Когда предел достигнут, вызывается выбранное событие: maxselected. (по умолчанию не ограничено);

No_results_text - текст, который будет отображаться, когда результаты не найдены;

Placeholder_text_multiple - текст для отображения в качестве заполнителя, если для множественного выбора не выбрано ни одного параметра;

Placeholder_text_single - текст, отображаемый в качестве заполнителя, если для одиночного выбора не выбрано ни одного параметра;

Search_contains - включенная опция позволяет разрешает совпадения, начиная с любого места в пределах слова (по умолчанию поиск начинается с начала слова);

Display_disabled_options - выключенная опция приведет к скрытию отключенных результатов и исключению их из поиска (по умолчанию, Chosen включает отключенные опции в результатах поиска со специальным стилем);

Display_selected_options - выключенная опция приведет к скрытию выбранных результатов и исключению их из поиска для множественного выбора (по умолчанию Chosen включает выбранные параметры в результатах поиска со специальным стилем);

Max_shown_results - показывать только первые (n) соответствующие параметры в результатах. Это можно использовать для повышения производительности для выбора с очень большим количеством опций;

Другие настройки смотрите на странице модуля.

Пример одиночного списка:
<select class="chosen-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Для множественного выбора достаточно добавить multiple:
<select class="chosen-select" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Инициализация происходит следующим образом:
<script type="text/javascript">
$(document).ready( function(e)
{
$(".chosen-select").chosen({
width: "50%",
disable_search: false,
disable_search_threshold: 5,
enable_split_word_search: false,
max_selected_options: 10,
no_results_text: "Ничего не найдено",
placeholder_text_multiple: "Выберите несколько параметров",
placeholder_text_single: "Выберите параметр",
search_contains: true,
display_disabled_options: false,
display_selected_options: false,
max_shown_results: Infinity
});
});
</script>
При инициализации можно изменять необходимые настройки плагина.

Добавить комментарий

Имя:
Текст комментария: