Закрытие балуна кастомной кнопкой - 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 комментария

Авторизуйтесь, чтобы оставить комментарий

Sergey Konstantinov

28 января 2016, 04:45

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

dimik

28 января 2016, 04:45

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' });

Sergey Konstantinov

28 января 2016, 04:45

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

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

mdlv2012

28 января 2016, 04:45

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