Я, наверное, говорю для многих людей, когда говорю, что стандартный выбор браузера по умолчанию не так прост в использовании. Чтобы выбрать несколько элементов, вам нужно одновременно нажать CTRL, а затем выбрать нужные элементы из элемента. По этой простой причине множественный выбор не является любимым компонентом пользователей или веб-разработчиков.
Чтобы решить эту проблему с пользовательским интерфейсом, существует множество способов заменить использование множественного выбора, одним из этих компонентов является знаменитый параллельный множественный выбор, где вы можете просто выбрать элементы с левой стороны, и они будут добавлены в правой части выберите. В этой статье мы хотим поделиться с вами удивительным плагином, который сделает это именно для вас.
1. Включите мультиселект
Multiselect — это удивительный плагин jQuery, который преобразует ваш множественный выбор в панель с двумя сторонами. Пользователь может выбрать один или несколько элементов и отправить их на другую сторону соответственно. Чтобы использовать этот плагин в вашем веб-проекте, вам просто нужно включить копию сценария и включите его в документ с помощью тега script:
Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь, Оформить демо-страницу здесь или читать документация.
2. Использование Multiselect
Теперь, когда плагин включен в проект, вы сможете позже инициализировать его с помощью JavaScript. Во-первых, вам нужно создать разметку, которая будет содержать 2 выбора, необходимые плагину для работы, а также кнопки, которые будут запускать действия по умолчанию. Идея в основном состоит в том, чтобы построить 3 столбца, которые будут содержать упомянутые элементы, при условии, что вы используете CSS-фреймворк, такой как Bootstrap, разметка будет выглядеть так:
Теперь в разметке есть несколько важных моментов, на которые следует обратить внимание, чтобы понять, как работает плагин. Во-первых, вам нужен только один идентификатор, остальные идентификаторы будут следовать за тем же именем, но с суффиксом. Например, в этом случае наш левый идентификатор элемента mySideToSideSelectТаким образом, идентификаторы кнопок действий будут иметь в качестве префикса идентификатор вашего элемента, поэтому в этом случае у нас будет mySideToSideSelect_rightAll и т. д. Теперь у правильного идентификатора элемента будет также как и префикс вашего начального идентификатора, так и суффикс _to, поэтому идентификатор правого элемента будет mySideToSideSelect_to, После правильной сборки разметки вам нужно только инициализировать множественный выбор с помощью jQuery:
$(document).ready(function() {
$('#mySideToSideSelect').multiselect();
});И это все ! Стоит отметить, что мы использовали очень простую инициализацию, которая следует стандартной схеме, однако вы можете изменять идентификаторы элементов, которые вы хотите, до тех пор, пока вы предоставляете их в объекте конфигурации multiselect, поэтому обязательно читать документацию по плагину для получения дополнительной информации об этой функции.
