Клуб API Карт

Закрытие балуна кастомной кнопкой - API 2.0

mdlv2012
13 мая 2012, 17:05

Есть балун с кастомной кнопкой закрытия.

 $("#close-balloon-link").click(function(){
            pl.balloon.close(
 }

 и балун закрывается, но если открыть балун снова, то при клике на крестик балун уже не закроется. Как сделать что бы балун закрывался всегда при нажатии на крестик?

function init(){
  
  ...

    pl = new ymaps.Placemark([37.6230320228801, 55.78980351830082]

    var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="b-simple-balloon-layout"><div class="content"><div class="balloon"><img class="balloon-img" src="img/map/balloon-img.jpg" alt="img1"/><div>...Текст...<br/>...Текст...<br/><span><a class="balloon-link" href="#">...</a></span></div></div></div><div class="close"><a href="#" id="close-balloon-link"></a></div><div class="tail"></div></div>'
    
                      
    ymaps.layout.storage.add('my#superlayout', myBalloonLayout);

    map.options.set({
              balloonLayout: 'my#superlayout',
              balloonShadow: true,
              preset: 'twirl#blueStretchyIcon'
    }
                           
    map.geoObjects.add(pl);
    pl.balloon.open(

    $("#close-balloon-link").click(function(){
            pl.balloon.close(
    }
}

$(document).ready(function() {
     ....
    ymaps.ready(init);
}

 Заранее спасибо.

 

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

1. Использовать $.live
2. var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
    '< html >', {
    build: function () {
        myBalloonLayout.superclass.build.call(this);
        $("#close-balloon-link").click(function(){
          pl.balloon.close();
         });
    }
 });

3. Сереж, а собственный balloonCloseButtonLayout не есть самый правильный способ? и сам контент балуна передавать через данные?

    var pl = new ymaps.Placemark([55.7, 37.6]),        myBalloonLayout = ymaps.templateLayoutFactory.createClass(            '$[properties.balloonContent]$[[options.closeButtonLayout]]'        ),        myBalloonCloseButtonLayout = ymaps.templateLayoutFactory.createClass('x', {            build: function () {                this.constructor.superclass.build.call(this);                $('#close-balloon-link').bind('click', $.proxy(this.onCloseClick, this));            },            clear: function () {                $('#close-balloon-link').unbind('click', $.proxy(this.onCloseClick, this));                this.constructor.superclass.build.call(this);            },            onCloseClick: function () {                this.getData().geoObject.balloon.close();            }        });    ymaps.layout.storage.add('my#balloonlayout', myBalloonLayout);    ymaps.layout.storage.add('my#balloonclosebuttonlayout', myBalloonCloseButtonLayout);    pl.properties.set({        balloonContent: '...Текст...
...Текст...
<span>...'    });    pl.options.set({        balloonLayout: 'my#balloonlayout',        balloonCloseButtonLayout: 'my#balloonclosebuttonlayout',        balloonShadow: true,        preset: 'twirl#blueStretchyIcon'    });

Ну, оцени объём кода :)

Собственный closeButtonLayout имеет смысл писать, если ты хочешь сменить именно саму кнопку закрытия на нашем балуне. А если у тебя свой дизайн, то выделять макет кнопки закрытия как отдельную сущность - по-моему, бессмысленно.

, спасибо большое, помогло