Клуб API Карт

Работа с пользовательским селектом (выдающим списком)

Noita
4 сентября 2012, 02:35

Всё-таки довольно скудная документация по пользовательским контролам.

Я хочу сделать пользовательский выпадающий список в углу карты. При выборе пункта, происходит какое-то действие, после чего выпадающий список принимает исходное состояние. При этом названия полей селекта должны быть одними, а значение, которое используется в обработчике события должно быть другим (ну, как в теге option есть текст, а есть значение опции, которое подвергается обработке).

Не получается реализовать. Поможете?

Этого http://api.yandex.ru/maps/doc/jsapi/2.x/dg/concepts/controls.xml мне оказалось недостаточно, чтобы понять.

 

4 комментария
Подписаться на комментарии к посту

Недавно мы разместили примеры пользовательских контролов

Среди них есть и выпадающий список

Дополнительные данные для элементов списка можно положить в объект data и затем использовать по своему усмотрению, например, в приведенном примере в ListBoxItem передается поле center

Спасибо!

Я смотрел именно эти примеры. К сожалению, из документации и контекста не ясно, что в параметр-объект data можно класть произвольные данные (если бы хотя бы было слово "произвольные", всё сразу стало бы прозрачно). Правда, всё равно не понятно, исходя из чего этот контрол заполняет текстовую часть каждой опции. Значит ли, что data.content - это обязательная часть параметра data, из которой по умолчанию берётся текстовая подпись?

Ну, хорошо. Можно брать данные. Теперь я в data каждой опции положу подсвойство value и буду хранить в нём обрабатывемое значение.

Но у меня после выбора пункта селекта не закрывается сам селект. Почему такое может происходить? Т.е. он закрывается, но спустя секунды три, да ещё если убрать курсор в сторонку.

Я ему говорю, например, так:

 

myListBox.events.add(['click'], function (e) {    var searchQuery = e.get('target').data.get('value');    ...    ...    ... // тут всякая обработка события}

Или событие нужно сажать на каждую опцию? Покажите, как правильно.

 

 

 

Значит ли, что data.content - это обязательная часть параметра data, из которой по умолчанию берётся текстовая подпись?

в данных нет ничего обязательного,

поле content используется стандартным макетом элемента списка для отображения подписи. Здесь просто сделано по-аналогии.

 И вроде бы из контекста это как раз понятно, стоит лишь внимательно посмотреть на шаблон. Вы можете назвать его "myContent", и брать из него название в шаблоне.

 

ymaps.templateLayoutFactory.createClass('
  • $[data.myContent]
  • ');

    Фиксированные имена имеют лишь опции

     

    Закрытие селекта при реализации своего макета возлагается на вас.

    В данных примерах это делает сам bootstrap, поэтому селект инстанцируется с опцией expandOnClick: false

    Но вы можете использовать и АПИ для управления открыванием/закрыванием селекта через состояния (поле state)

    пример в документации как раз демонстрирует такой вариант

    Поле expanded в объекте состояния контрола как раз позволяеет управлять видимостью контейнера дочерних элементов 

    // Этот элемент будет служить контейнером для дочерних элементов списка. ""

    Вы можете после обработки клика явно вызывать collapse у listBox.

    myListBox.events.add(['click'], function (e) {    var searchQuery = e.get('target').data.get('value');    ...    ...    ... // тут всякая обработка события    myListBox.collapse();}