В пользовательском интерфейсе jQuery не работают вкладки пользовательского интерфейса jQuery (карта Google V3)

Question

В пользовательском интерфейсе jQuery не работают вкладки пользовательского интерфейса jQuery (карта Google V3)

0

Я в тупике. У меня есть эта тестовая карта, которая делает почти все правильно. За исключением рабочих вкладок пользовательского интерфейса jQuery внутри информационного окна.

Это решение в "обычном" приложении карты Google.

google.maps.event.addListener(infoWindow, 'domready', function() {
$("#tabs").tabs();
});

Я "обертываю" HTML в скрипт jQuery. Данные извлекаются из атрибутов данных HTML5.

Скрипт для запуска вкладок ui - это jQuery ("# tabs"). Tabs(); или $ ("# tabs"). В настоящее время он помещается в голову. Это неправильно в этом контексте из-за неправильного времени. Но я не понял, как решить эту проблему. Вот как запускать скрипт ui-tabs в нужное время, поэтому я получаю инфоиндустрию, которую я желаю.

Я ценю любую помощь в этом вопросе. Я несколько дней стучал головой и искал высоко и низко, но безрезультатно.

Вот моя страница

               <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demokart javascript debug</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link type="text/css" href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" />

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    jQuery(document).ready(function() {
      jQuery("#tabs").tabs();
     });
    </script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/demos/js/demo.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
    </head>
    <body >
          <div id="map_canvas" class="map rounded" style="height:465px;"></div>
        <p>Pre text</p>
          <ul>
            <li id="#tabs" data-gmapping='{"id":"00007","latlng":{"lat":59.756524742079,"lng": 9.99929666519165},"tags":"Company name", "ikon":"some_pointer.gif", "tab1":" tab1   1 all data here", "tab2":"tab 2 all data ", "tab3":"Tab3  all data here"}'>
              <p >One place we want to show </p>
            </li>
            <li class="#tabs" data-gmapping='{"id":"00008","latlng":{"lat":59.17279,"lng": 9.61545},"tags":Another company", "ikon":"some_pointer.gif", "tab1":" 1 all data here", "tab2":"tab 2  all data here", "tab3":"tab 3 all data here"}'>
              <p >Some text about this place </p>
            </li>
          </ul>
     <script type="text/javascript">
     $(function() { 
                    demo.add(function() {  
                        $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                            var self = this;    
                                $("[data-gmapping]").each(function(i,el) {
                                var data = $(el).data('gmapping');
                                self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'icon':data.ikon, 'bounds':true }, function(map,marker) {
                                    $(el).click(function() {
                                        $(marker).triggerEvent('click');
                                    });
                            }).click(function() {                   
                                    var text = [
             '<div id="tabs"><ul><li><a href="#tab-1">Adress</a></li>',
              '<li><a href="#tab-2">Contact</a></li>',
               '<li><a href="#tab-3">Services</a></li></ul>', 
              '<div id="tab-1">',
              '<b>' + data.tab1 + '</b> - ' +  '<BR>', 
              '</div>',  
              '<div id="tab-2">',
              '<b>' + data.tab2 + '<BR>',
                '</div>',
             '<div id="tab-3">',
                   data.tab3  + '<BR>',
              '</div>'
           ].join('');  
                                       self.openInfoWindow({ 'content': text}, this);
    google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})                         });
                            });                     
                        }});
                    }).load();
                });
</script>
    </body>
    </html>

user1500961 23 сен. 2013, в 22:21

Источник

Теги:

jquery

google-maps-api-3

jquery-ui

html5-data

jquery-ui-map

1 ответ

Ещё вопросы

Dr.Molle · Accepted Answer · 2013-09-23T21-26-00.000Z

infoWindow будет храниться внутренне как свойство с именем " iw ", вы можете получить к нему доступ в своем коде (как только он будет инициализирован) через self.get('iw').

Добавьте это после вызова self.openInfoWindow():

google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})

Удивительно! Спасибо за славную помощь! Доктор Молл. 1.000.000 очков кармы вам :-)