Клуб API Карт

Табы в балуне

allians-sk
1 июля 2015, 04:32

Как торазбирался в этом апи, потом забросил) Опять вернулся. Кто добрый может сказать ( лучше кодом), как заставить работать табы в балуне. Вот через MyBalloonContentLayout

 

    MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
            
                ' <ul class="nav nav-tabs" id="Tab">' +
  ' <li class="active"><a href="#home">Home</a></li>' +
  ' <li><a href="#profile">Profile</a></li>' +
  ' <li><a href="#messages">Messages</a></li>' +
  ' <li><a href="#settings">Settings</a></li>' +
 '</ul> '+
 '<div class="tab-content">'+
'  <div class="tab-pane active" id="home">czxcxzcxczx.</div>'+
'  <div class="tab-pane" id="profile">.zxczczxcz.</div>'+
 ' <div class="tab-pane" id="messages">..zxczxc.</div>'+
 ' <div class="tab-pane" id="settings">.zxczxczxczxc</div>'+
'</div>'
        ),

А дальше как функци прописать на клики по табам?

8 комментариев

Обработчики событий назначаются в методе build и снимаются в методе clear

https://tech.yandex.ru/maps/jsbox/2.1/placemark_balloon_layout

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

Я же дал ссылку на пример. Что именно не получается?

Можно использовать jQuery.on на селектор ".tab-pane"

https://api.jquery.com/on/

не получаеться понять, как мне туда вообще записывать? ти по 

$('#Tab').bind('click', this.onCounterClick);

                $('#tab-content').html(counter);

мне нужно понять как правильно называть эти переменные и как прописывать вообще такую функцию. В том примере да и другом build не расписан в коментах, не понятно мне человеку , который не работал раньше с апи, но нету времени изучать основы( Нужно понять только отдельные вещи 

АПИ тут ни при чем. Прочитайте про селекторы и событийную модель jQuery. 

ну ок, покапался , вот что вышшло 

MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(

 

             ' '+ '  '+  'Welcome to StarTrackr! the planets premier … '+ '  '+  '   StarTrackr! was founded in early 2009 when a young …'+'   '+ '  '+ '    Disclaimer! This service is not intended for those …'+'   '+' '+'
    '+
'  
  • Intro
  • '+ '
  • About Us
  • '+'  
  • Disclaimer
  • '+''

    ну и 

     

    build: function () {
                        this.constructor.superclass.build.call(this);                    this._$element = $('.popover', this.getParentElement());                                             $('#info-nav li').click(function(event) {  event.preventDefault();  $('#info div').hide();  $('#info-nav .current').removeClass("current");  $(this).addClass('current');  var clicked = $(this).find('a:first').attr('href');  $('#info ' + clicked).fadeIn('fast');}).eq(0).addClass('current');                },                /**                 * Удаляет содержимое макета из DOM.                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear                 * @function                 * @name clear                 */                clear: function () {                    this._$element.find('.close')                        .off('click');                    this.constructor.superclass.clear.call(this);                },

    работают, но не как табы , а как ссылки, как им предать нужный вид?

    чета пока ппц как криво . Вот код, может для кого то тоже полезен 

    function set11 () {

     

     BalloonContentLayout2 = ymaps.templateLayoutFactory.createClass(             ''+ '
      '+
      '  
  • 1-я вкладка
  • '+  '  
  • 2-я вкладка
  • '+ ' '+'  '+ '   Содержимое первого блока'+'  '+'  '+ '  Содержимое второго блока'+ ' '+'', {            // Переопределяем функцию build, чтобы при создании макета начинать            // слушать событие click на кнопке-счетчике.            build: function () {                // Сначала вызываем метод build родительского класса.                BalloonContentLayout2.superclass.build.call(this);                // А затем выполняем дополнительные действия.                 $('ul.tabs__caption').on('click', 'li:not(.active)', function() {    $(this)      .addClass('active').siblings().removeClass('active')      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');  });            },            // Аналогично переопределяем функцию clear, чтобы снять            // прослушивание клика при удалении макета с карты.            clear: function () {                // Выполняем действия в обратном порядке - сначала снимаем слушателя,                // а потом вызываем метод clear родительского класса.                                  BalloonContentLayout2.superclass.clear.call(this);            }                    });    var placemark = new ymaps.Placemark([0.195219, -0.488964], {                 }, {            balloonContentLayout: BalloonContentLayout2,            // Запретим замену обычного балуна на балун-панель.            // Если не указывать эту опцию, на картах маленького размера откроется балун-панель.            balloonPanelMaxMapArea: 0        });    map.geoObjects.add(placemark);}

    как правельно там прописать событие  clear: function () {  ?

    ну а цсс вот 

     

    .tabs__content {
      display: none;  border: 1px solid #D4D4D4;  border-width: 0 1px 1px;  background: #EFEFEF;  padding: 0 12px;}.tabs__content.active {  display: block;  }.tabs__caption .active {  color: #444;  background: #EFEFEF;  }.tabs__caption {  height: 28px;   width: 200px;  line-height: 25px;  list-style: none;  border-bottom: 1px solid #DDD;  background: #FFF;.tabs {  width: 600px;  background: #EFEFEF;  margin: 0 0 30px;}.tabs__caption li {  float: left;  display: inline;  margin: 0 1px -1px 0;  padding: 0 13px 1px;  color: #777;  cursor: pointer;  background: #F9F9F9;  border: 1px solid #E4E4E4;  border-bottom: 1px solid #F9F9F9;  position: relative;}

    криво, очень криво, хотя не должно быть так