Произвольный макет выпадающего списка

Open in CodeSandbox

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

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

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

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

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

Через опции можно задавать настройки как самого выпадающего списка, так и настройки для его дочерних элементов. Для этого опции дочерних элементов нужно указывать с префиксом '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.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="list_box_layout.js" type="text/javascript"></script>
        <link
            href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            #my-listbox {
                top: auto;
                left: auto;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.751574, 37.573856],
            zoom: 9,
            controls: [],
        }),
        // Создадим собственный макет выпадающего списка.
        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: "Выберите пункт",
            },
            options: {
                // С помощью опций можно задать как макет непосредственно для списка,
                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, { float: "left" });
}