В процессе разработки нередко приходится создавать и выводить на экран выпадающие списки. Особенно часто это приходится делать в административной части расширения, где необходимо предоставить возможность выбора категорий, городов, всевозможных состояний записи. Я написал небольшую шпаргалку по данной теме применительно к Joomla 4 и Joomla 5. Очень надеюсь, что она окажется полезной не только мне, но и всем тем, кто волей судьбы оказался на этой страничке.
При работе с Joomla у нас есть три способа создания выпадающих списков:
1) Путем вставки в XML файл формы поля с типом «LIST». Подробнее о типах полей можно прочитать на странице официальной документации.
2) С помощью класса «HTMLHelper». Данный способ мы обязательно рассмотрим чуть подробнее.
3) Путем создание своего кода. Здесь всё зависит от ваших навыков и фантазии. Рассматривать данный способ мы не будем.
Красивый множественный выбор
Как известно, выпадающие списки могут быть, как с простым выбором, где пользователь может выбрать одно любое значение, так и со множественным.
Для того, чтобы получить список со множественным выбором мы должны добавить к нему атрибут «MULTIPLE» со значением «TRUE».
Например, для XML поля это будет выглядеть так:
Обычный HTML код выпадающего списка со множественным выбором будет выглядеть так:
Нюанс в том, что по умолчанию в Joomla 4 и Joomla 5, выпадающий список со множественным выбором отобразится в виде текстового поля с возможностью множественного выбора путем нажатия на клавишу CTRL.
Это не совсем удобно. Пользователь давно привык к выпадающим спискам реализованным с помощью библиотеки «chosen».
Пример такого списка показан на скриншоте ниже:
Осталось дело за малым: подключить библиотеку «chosen». Благо такая возможность предоставлена нам разработчиками системы.
Сделать это можно с помощью строчки кода, которую мы должны вставить в файл шаблона:
HTMLHelper::_('formbehavior.chosen', 'select', null, array('disable_search_threshold' => 0 ));
Выпадающий список с помощью класса HTMLHelper
Класс HTMLHelper значительно упрощает жизнь разработчика, если этот самый разработчик знает хотя бы о половине возможностей заложенных в этот класс.
Нам половина не нужна, однако, выпадающий список с помощью класса HTMLHelper мы создадим.
Пусть это будет список животных с возможностью множественного выбора.
Ниже показан код, который предлагаю разобрать
use \Joomla\CMS\HTML\HTMLHelper;
HTMLHelper::_('formbehavior.chosen', 'select', null, array('disable_search_threshold' => 0 ));
$items = array();
$items[] = array('value'=> '0', 'text' => 'Кот');
$items[] = array('value'=> '1', 'text' => 'Собака');
$items[] = array('value'=> '2', 'text' => 'Бегемот');
$name = 'animals';
$attibutes = 'multiple="true"';
$value = 'value';
$text = 'text';
$selected = array(0, 2);
$id = 'animals';
$toText = false;
$list = HTMLHelper::_('select.genericlist', $items, $name, $attibutes, $value, $text, $selected, $id, $toText);
echo $list;
Вначале нашего кода мы подключаем библиотеку «chosen», которая сделает наш выпадающий список красивым и удобным.
Далее разберем переменные:
$items — собственно, массив с данными. По сути это массив ассоциативных массивов, где с ключом «value» мы храним соответствующий атрибут тега option нашего списка . А с ключом «text» его текстовое содержимое.
При желании и необходимости мы можем отправить не только массив ассоциативных массивов, но и массив объектов.
$name — в данной переменной мы задаем одноименный атрибут нашего списка. То есть, имя.
$attibutes — здесь мы передаем дополнительные атрибуты. В нашем случае это атрибут «multiple».
$value — в переменной $value мы передаем наименование ключа, отвечающего за хранение соответствующего атрибута.
$text — в переменной $text хранится ключ, отвечающий за хранение текстового содержимого элемента списка.
$selected — данная переменная отвечает за хранение выбранного значения. Поскольку мы имеем дело со множественным выбором, то переменная должна являться массивом и хранить массив.
$id — здесь мы задаем атрибут «id» нашего списка.
$toText — данная переменная может принимать либо значение «true», либо «false». В первом случае текстовые значения нашего массива $items будут обработаны классом Text.
И если в массиве будут обнаружены языковые константы, с помощью класса Text, будет подставлен их перевод.
В переменную $list мы сохраняем наш выпадающий список и далее с помощью команды echo выводим его на экран:
Заключение
Как видим, наш список не просто отобразился, но отобразился с уже выбранными значениями, которые мы передали в переменной $selected.
Работа с классом HTMLHelper избавляет разработчика от регулярного изобретения велосипеда и позволяет создать выпадающий список в Joomla 4 или Joomla 5 в предельно короткие сроки.
Если у вас остались вопросы и предложения, жду их в своей группе по ссылке ниже:
С уважением, Владимир Егоров
