Макет выпадающего списка

Open in CodeSandbox

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текcтовые шаблоны.

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

Выпадающий список по умолчанию реагирует на клик по своему макету и меняет значение поля state.get('expanded').

События макета, на которые реагирует выпадающий список, описаны в интерфейсах IExpandableControlLayout и IGroupControl.

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

Через опции можно задавать настройки как самого выпадающего списка, так и настройки для его дочерних элементов. Для этого опции дочерних элементов нужно указывать с префиксом 'item'. 

<!DOCTYPE html>

<html>
    <head>
        <title>Примеры. Пользовательский макет выпадающего списка.</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <link
            href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script
            src="https://yandex.st/jquery/1.8.0/jquery.min.js"
            type="text/javascript"
        ></script>

        <script src="list_box_layout.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.751574, 37.573856],
            zoom: 9,
        }),
        // Создадим собственный макет выпадающего списка.
        ListBoxLayout = ymaps.templateLayoutFactory.createClass(
            "<button id='my-listbox-header' class='btn btn-success dropdown-toggle' data-toggle='dropdown'>" +
                "$[data.title] <span class='caret'></span>" +
                "</button>" +
                // Этот элемент будет служить контейнером для элементов списка.
                // В зависимости от того, свернут или развернут список, этот контейнер будет
                // скрываться или показываться вместе с дочерними элементами.
                "<ul id='my-listbox'" +
                " class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" +
                " style='display: [if state.expanded]block[else]none[endif];'></ul>",
            {
                build: function () {
                    // Вызываем метод build родительского класса перед выполнением
                    // дополнительных действий.
                    ListBoxLayout.superclass.build.call(this);

                    this.childContainerElement = $("#my-listbox").get(0);
                    // Генерируем специальное событие, оповещающее элемент управления
                    // о смене контейнера дочерних элементов.
                    this.events.fire("childcontainerchange", {
                        newChildContainerElement:
                            this.childContainerElement,
                        oldChildContainerElement: null,
                    });
                },

                // Переопределяем интерфейсный метод, возвращающий ссылку на
                // контейнер дочерних элементов.
                getChildContainerElement: function () {
                    return this.childContainerElement;
                },

                clear: function () {
                    // Заставим элемент управления перед очисткой макета
                    // откреплять дочерние элементы от родительского.
                    // Это защитит нас от неожиданных ошибок,
                    // связанных с уничтожением dom-элементов в ранних версиях ie.
                    this.events.fire("childcontainerchange", {
                        newChildContainerElement: null,
                        oldChildContainerElement:
                            this.childContainerElement,
                    });
                    this.childContainerElement = null;
                    // Вызываем метод clear родительского класса после выполнения
                    // дополнительных действий.
                    ListBoxLayout.superclass.clear.call(this);
                },
            }
        ),
        // Также создадим макет для отдельного элемента списка.
        ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
            "<li><a>$[data.content]</a></li>"
        ),
        // Создадим 2 пункта выпадающего списка
        listBoxItems = [
            new ymaps.control.ListBoxItem({
                data: {
                    content: "Москва",
                    center: [55.751574, 37.573856],
                    zoom: 9,
                },
            }),
            new ymaps.control.ListBoxItem({
                data: {
                    content: "Омск",
                    center: [54.990215, 73.365535],
                    zoom: 9,
                },
            }),
        ],
        // Теперь создадим список, содержащий 2 пунтка.
        listBox = new ymaps.control.ListBox(
            {
                items: listBoxItems,
                data: {
                    title: "Выберите пункт",
                },
            },
            {
                // С помощью опций можно задать как макет непосредственно для списка,
                layout: ListBoxLayout,
                // так и макет для дочерних элементов списка. Для задания опций дочерних
                // элементов через родительский элемент необходимо добавлять префикс
                // 'item' к названиям опций.
                itemLayout: ListBoxItemLayout,
            }
        );

    listBox.events.add("click", function (e) {
        // Получаем ссылку на объект, по которому кликнули.
        // События элементов списка пропагируются
        // и их можно слушать на родительском элементе.
        var item = e.get("target");
        // Клик на заголовке выпадающего списка обрабатывать не надо.
        if (item != listBox) {
            myMap.setCenter(item.data.get("center"), item.data.get("zoom"));
        }
    });

    myMap.controls.add(listBox, { left: 5, top: 5 });
}