Клуб API Карт

Клуб API Карт

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

Пост в архиве.

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

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

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

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

 

4 комментария
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 03:45

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

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

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

Noita
28 января 2016, 03:45

Спасибо!

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

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

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

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

 

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

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

 

 

dimik
28 января 2016, 03:45

 

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

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

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

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

 

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

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

     

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

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

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

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

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

    // Этот элемент будет служить контейнером для дочерних элементов списка. ""
    mari-na-bzzz
    28 января 2016, 03:45

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

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