В данном примере создается пользовательский макет
выпадающего списка.
Макет элемента управления строится на основе его данных, состояния и опций.
Макет автоматически перестраивается при изменении значений полей,
состояния или опций, которые используются в его текстовом шаблоне.
Выпадающий список по умолчанию реагирует на клик по своему макету и меняет
значение поля state.get('expanded').
Выпадающий список является групповым элементом управления, поэтому его макет
должен генерировать события и реализовывать методы, описанные в IGroupControlLayout.
Через опции можно задавать настройки как самого выпадающего списка, так и настройки
для его дочерних элементов. Для этого опции дочерних элементов нужно указывать
с префиксом 'item'.
{% list tabs %}
- index.html
```html
Произвольный макет выпадающего списка
```
- list_box_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.751574, 37.573856],
zoom: 9,
controls: [],
}),
// Создадим собственный макет выпадающего списка.
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
"" +
// Этот элемент будет служить контейнером для элементов списка.
// В зависимости от того, свернут или развернут список, этот контейнер будет
// скрываться или показываться вместе с дочерними элементами.
"
",
{
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(
"
"
),
// Создадим 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" });
}
```
{% endlist %}