Клуб API Карт

Сворачиваемый список внутри балуна

Turn7
28 января 2015, 20:38

Помоги пожалуйста, нужно при щелчке по балуну чтобы в нем было несколько строк, по щелчеку на строку раскрывается список. Бьюсь уже не первый день

7 комментариев
Подписаться на комментарии к посту
Всеволод Шмыров
29 января 2015, 11:48
Доброе утро! А что именно не получается? Можете дать ссылку с текущим результатом?

Ссылки нет, вот текст  

 

ymaps.ready(init);

 

function init () {

    var map = new ymaps.Map('map', {

            center: [55.650625, 37.62708],

            zoom: 10

        }),

        counter = 0,

 

        // Создание макета содержимого балуна.

        // Макет создается с помощью фабрики макетов с помощью текстового шаблона.

        BalloonContentLayout = ymaps.templateLayoutFactory.createClass(

         

'' +

'    

Список №1+ ' +

'    

       ' +

'        

  • Пункт №1
  •  ' +

    '        

  • Пункт №2
  • ' +

    '        

  • Пункт №3
  • ' +

    '        

  • Пункт №4
  • ' +

    '             ' +

    '            ' +

    '  ' +

    '    

    Список №2+  ' +

    '    

                                ' +

    '        

  • Пункт №5
  •    ' +

    '        

  • Пункт №6
  •    ' +

    '        

  • Пункт №7
  •     ' +

    '        

  • Пункт №8
  •     ' +

    '             ' +

    '', {

     

    //'' +

    //'

    ' + PointName + '

    ' +

    //resultText + 

    //' ' +

    //'

    ИзменитьРезультаты посещений

    ' +

    //'', {

     

                // Переопределяем функцию build, чтобы при создании макета начинать

                // слушать событие click на кнопке-счетчике.

                build: function () {

                    // Сначала вызываем метод build родительского класса.

                    BalloonContentLayout.superclass.build.call(this);

                    // А затем выполняем дополнительные действия.

                    $('#counter-button').bind('click', this.onCounterClick);

                    $('#count').html(counter);

                },

     

                // Аналогично переопределяем функцию clear, чтобы снять

                // прослушивание клика при удалении макета с карты.

                clear: function () {

                    // Выполняем действия в обратном порядке - сначала снимаем слушателя,

                    // а потом вызываем метод clear родительского класса.

                    $('#counter-button').unbind('click', this.onCounterClick);

                    BalloonContentLayout.superclass.clear.call(this);

                },

     

                onCounterClick: function () {

                    $('#count').html(++counter);

                    if (counter == 5) {

                        alert('Вы славно потрудились.');

                        counter = 0;

                        $('#count').html(counter);

                    }

                }

            });

     

        var placemark = new ymaps.Placemark([55.650625, 37.62708], {

                name: 'Считаем'

            }, {

                balloonContentLayout: BalloonContentLayout,

                // Запретим замену обычного балуна на балун-панель.

                // Если не указывать эту опцию, на картах маленького размера откроется балун-панель.

                balloonPanelMaxMapArea: 0

            });

     

        map.geoObjects.add(placemark);

    }

    Вот по щелчку на балун откроется HTML которая выглядит как два списка, мне необходимо реализоваться чтобы оба списка можно было сворачивать и разворачивать

    Всеволод Шмыров
    29 января 2015, 14:02
    И все же в чем именно возникает проблема? Вряд ли кто-то просто так полностью за вас напишет код.

    Я это понимаю, хочется понять, вообще возможно ли такое реализовать? Ведь в балуне событие только клик, а мне необходимо отлавливаться открытие разных списков.

    Всеволод Шмыров
    29 января 2015, 14:35
    Конечно, возможно. В этом примере происходит подписка только на событие "click". В макете можно реализовать произвольную JS логику. Метод build - по  сути конструктор, а clear - деструктор макета. Через метод getElement можно обратится к HTML элементу и через него найти определенные дочерние ноды (к примеру, при помощи jQuery).
    Посмотрите примеры:
    https://tech.yandex.ru/maps/jsbox/2.1/cluster_balloon_accordion_21
    https://tech.yandex.ru/maps/jsbox/2.1/cluster_custom_balloon_content_layout_21

    Хочется понять в какую сторону копать, чтобы направили