--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/llms.txt # control.ListBox Расширяет [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md). Класс для создания элемента управления в виде раскрывающегося списка. ## Конструктор {#constructor} ```javascript control.ListBox([params[, options]]) ``` **Параметры:** #| || **Параметр** | **Значение по умолчанию** | **Описание** || || `params` | — | Тип: Object Параметры элемента управления. || || `params.data` | — | Тип: Object Данные. || || `params.data.title` | — | Тип: String Заголовок списка. || || `params.items` | — | Тип: [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md)[] Пункты списка. || || `options` | — | Тип: Object Опции элемента управления. || || `options.collapseTimeout` | 3000 | Тип: Number Временной интервал, по истечении которого раскрытый список автоматически закрывается. || || `options.expandOnClick` | true | Тип: Boolean Флаг, разрешающий автоматическое разворачивание/сворачивание списка по клику. || || `options.layout` | — | Тип: Function\|String Макет элемента управления. В конструктор макета передается объект, содержащий поля: • control - ссылка на элемент управления; • options - менеджер опций элемента управления control.ListBox.options; • data - менеджер данных элемента управления [control.ListBox.data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#data); • state - менеджер состояния элемента управления [control.ListBox.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#state). Макет меняет свой внешний вид на основе данных, состояния и опций элемента управления. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей [control.ListBox.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#state) в зависимости от полученных команд. (Тип: конструктор объекта, реализующий интерфейсы: • [IGroupControlLayout](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IGroupControlLayout.md); • [IExpandableControlLayout](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IExpandableControlLayout.md). или ключ макета). || || `options.minWidth` | 0 | Тип: Number Минимальная ширина выпадающего списка. || || `options.position` | \{ top: 5, left: 5 \} | Тип: Object Положение элемента управления над картой. Задается в виде объекта со следующими полями: • top - отступ от верхнего края контейнера карты в пикселах; • right - отступ от правого края контейнера карты в пикселах; • bottom - отступ от нижнего края контейнера карты в пикселах; • left - отступ от левого края контейнера карты в пикселах. Если при этом заданы одновременно и top, и bottom, то значение bottom игнорируется. Аналогично, если заданы одновременно и left, и right, то значение right игнорируется. Если элемент управления добавляется в группу элементов (например, в тулбар или раскрывающийся список), то значение position не применяется. || || `options.visible` | true | Тип: Boolean Признак того, что элемент управления отображается. || |# **Примеры:** **1.** ```javascript // Пример 1. // Обработка клика на элементах списка. var cityList = new ymaps.control.ListBox({ data: { title: 'Выбрать город' }, items: [ new ymaps.control.ListBoxItem({data: {content: 'Москва'}}), new ymaps.control.ListBoxItem({data: {content: 'Новосибирск'}}), new ymaps.control.ListBoxSeparator(), new ymaps.control.ListBoxItem({data: {content: 'Нью-Йорк'}}), ] }); cityList.get(0).events.add('click', function () { map.setCenter([55.752736, 37.606815]); }); cityList.get(1).events.add('click', function () { map.setCenter([55.026366, 82.907803]); }); cityList.get(3).events.add('click', function () { map.setCenter([40.695537, -73.97552]); }); map.controls.add(cityList); ``` **2.** ```javascript // Пример 2. // Создание пользовательского списка. // В примере используется jQuery, загруженный с http://yandex.st/jquery/1.6.4/jquery.min.js // Выпадающий список по умолчанию реагирует на события 'click' и автоматически // меняет состояние на развернутое или свернутое. var MyListBoxLayout = ymaps.templateLayoutFactory.createClass( "
$[data.title]
" + // Этот элемент будет служить контейнером для дочерних элементов списка. "
" + "
", { build: function() { MyListBoxLayout.superclass.build.call(this); this.childContainerElement = $('#my-list-box').get(0); // Каждый раз при перестроении будем генерировать событие, // сигнализирующее о смене контейнера для дочерних элементов. // Формат события описан в интерфейсе IGroupControlLayout. this.events.fire('childcontainerchange', { newChildContainerElement: this.childContainerElement, oldChildContainerElement: null }); }, // Переопределим метод, который требует интерфейс IGroupControlLayout. getChildContainerElement: function () { return this.childContainerElement; } }), // Создадим список и выставим созданный макет через опции. listBox = new ymaps.control.ListBox({}, {layout: MyListBoxLayout}); ``` ## Поля {#fields} #| || **Имя** | **Тип** | **Описание** || || [data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#data) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Данные выпадающего списка. Имена полей, доступных через метод data.Manager.get: • title - заголовок выпадающего списка. || || [events](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventManager.md) | Менеджер событий. Унаследовано от [IEventEmitter](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events). || || [options](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options) | [IOptionManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IOptionManager.md) | Менеджер опций. Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options). || || [state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#state) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Состояние выпадающего списка. Имена полей, доступных через метод data.Manager.get: • expanded - признак, раскрыт ли список. || |# ## События {#events} #| || **Имя** | **Описание** || || [add](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#add) | Произошло добавление дочернего объекта. Унаследовано от [ICollection](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#add). || || [childcontainerchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#childcontainerchange) | Изменение дом-элемента, в который добавляются дочерние элементы группы. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). Имена полей, доступных через метод Event.get: • newChildContainerElement - новый дом-элемент для дочерних элементов; • oldChildContainerElement - старый элемент для дочерних элементов. Унаследовано от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#childcontainerchange). || || [click](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#click) | Щелчок по заголовку списка. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). || || [collapse](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#collapse) | Список закрыт. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). || || [expand](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#expand) | Список открыт. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). || || [mapchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IParentOnMap.md#mapchange) | Сменилась карта. Поля данных: • oldMap - старая карта; • newMap - новая карта. Унаследовано от [IParentOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IParentOnMap.md#mapchange). || || [optionschange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#optionschange) | Изменение в опциях объекта. Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#optionschange). || || [parentchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#parentchange) | Сменился родительский объект. Поля данных: • oldParent - старый родитель; • newParent - новый родитель. Унаследовано от [IChild](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#parentchange). || || [remove](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#remove) | Произошло удаление дочернего объекта. Унаследовано от [ICollection](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#remove). || |# ## Методы {#method} #| || **Имя** | **Возвращает** | **Описание** || || [add](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#add)([item](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#add-param-item)[, [positionIndex](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#add-param-positionIndex)]) | [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md) | Добавляет элемент управления в группу. Элемент можно добавлять, передав экземпляр класса, реализующего интерфейс [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md), или по ключу. Возожные значения ключей: • "mapTools" - стандартный тулбар с кнопками "Навигация", "Выделение" и "Линейка" [control.MapTools](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.MapTools.md); • "miniMap" - обзорная карта [control.MiniMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.MiniMap.md); • "scaleLine" - масштабный отрезок [control.ScaleLine](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ScaleLine.md); • "searchControl" - панель поиска [control.SearchControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.SearchControl.md); • "trafficControl" - панель пробок [control.TrafficControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md); • "typeSelector" - панель переключения типа карты [control.TypeSelector](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TypeSelector.md); • "zoomControl" - ползунок масштаба [control.ZoomControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ZoomControl.md); • "smallZoomControl" - простой ползунок масштаба [control.SmallZoomControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.SmallZoomControl.md). Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#add). || || [collapse](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#collapse)() | | Сворачивает список. || || [each](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#each)([callback](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#each-param-callback)[, [context](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#each-param-context)]) | [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md) | Перебирает все элементы коллекции, вызывая для каждого функцию-обработчик. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#each). || || [expand](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#expand)() | | Раскрывает список. || || [filter](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#filter)([callback](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#filter-param-callback)) | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md)[] | Функция для выборки дочерних элементов по условию. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#filter). || || [get](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#get)() | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md) | Returns ссылку на объект контрола, добавленного по ключу или по индексу. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#get). || || [getAll](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getAll)() | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md)[] | Returns массив дочерних элементов контрола. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getAll). || || [getChildElement](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md#getChildElement)([child](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md#getChildElement-param-child)) | HTMLElement | Возвращает для своего дочернего объекта HTML-элемент, в котором он должен размещаться. Унаследован от [IControlParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md#getChildElement). || || [getContainer](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getContainer)() | HTMLElement | Returns контейнер, в который добавляются дочерние элементы контрола. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getContainer). || || [getIterator](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#getIterator)() | [IIterator](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IIterator.md) | Returns итератор по коллекции. Унаследован от [ICollection](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICollection.md#getIterator). || || [getLength](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getLength)() | Number | Returns количество дочерних элементов. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#getLength). || || [getMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IParentOnMap.md#getMap)() | [Map](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Map.md) | Returns ссылку на карту. Унаследован от [IParentOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IParentOnMap.md#getMap). || || [getParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md) | Returns ссылку на родительский объект. Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent). || || [indexOf](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#indexOf)([childToFind](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#indexOf-param-childToFind)) | Integer | Returns индекс дочернего элемента в группе. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#indexOf). || || [isExpanded](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#isExpanded)() | Boolean | Returns признак того, находится ли контрол в развернутом состоянии. || || [remove](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#remove)([item](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#remove-param-item)) | [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md) | Удаляет элемент управления из группы. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#remove). || || [removeAll](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#removeAll)() | [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md) | Удаляет все дочерние элементы из группы. Унаследован от [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md#removeAll). || || [setMinWidth](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#setMinWidth)([width](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#setMinWidth-param-width)) | | Устанавливает ширину списка. || || [setParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md) | Устанавливает родительский объект. Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent). || || [setTitle](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#setTitle)([html](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md#setTitle-param-html)) | | Задает новый заголовок раскрывающегося списка. || |# ## Описание полей {#description-fields} ### data ```javascript {data.Manager} data ``` Данные выпадающего списка. Имена полей, доступных через метод data.Manager.get: -• title - заголовок выпадающего списка. **Пример:** ```javascript // Добавим на карту выпадающий список и будем менять его заголовок // в зависимости от того, свернут список или развернут. // Создадим группу слушателей событий. var listBoxListener = listBox.events.group() .add('expand', function () { listBox.data.set('title', 'Список развернут'); }) .add('collapse', function () { listBox.data.set('title', 'Список свернут'); }); map.controls.add(listBox, {top: 10, left: 10}); // ... map.controls.remove(listBox); // После удаления элемента с карты удалим слушателей. listBoxListener.removeAll(); ``` ### state ```javascript {data.Manager} state ``` Состояние выпадающего списка. Имена полей, доступных через метод data.Manager.get: • expanded - признак, раскрыт ли список. **Пример:** ```javascript // Создадим и добавим на карту список, который изначально открыт. var listBox = new ymaps.control.ListBox(); listBox.state.set('expanded', true); map.controls.add(listBox); ``` ## Описание событий {#description-events} ### click Щелчок по заголовку списка. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ### collapse Список закрыт. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ### expand Список открыт. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ## Описание методов {#description-methods} ### collapse ```javascript {} collapse() ``` Сворачивает список. ### expand ```javascript {} expand() ``` Раскрывает список. ### isExpanded ```javascript {Boolean} isExpanded() ``` **Returns** признак того, находится ли контрол в развернутом состоянии. ### setMinWidth ```javascript {} setMinWidth(width) ``` Устанавливает ширину списка. **Параметры:** #| || **Параметр** | **Значение по умолчанию** | **Описание** || || `width`[*](*parametr) | — | Тип: Number Ширина списка. || |# \* Обязательный параметр/опция. ### setTitle ```javascript {} setTitle(html) ``` Задает новый заголовок раскрывающегося списка. **Параметры:** #| || **Параметр** | **Значение по умолчанию** | **Описание** || || `html`[*](*parametr) | — | Тип: String Заголовок. || |# \* Обязательный параметр/опция. [*parametr]:Обязательный параметр/опция.