jQuery UI + Gmaps =问题（对我来说至少）帮助！ [英] jQuery UI + Gmaps = Problems (for me at least) HELP!

问题描述

一旦我发现了jQuery，就开始使用jQuery，这是非常强大的，但是当我尝试将Gmaps api加载到jQuery UI带来的选项卡时，我开始苦苦挣扎。
在IE 6,7,8中足够强大，但工作正常，但在Firefox中，Safari（我正在使用mac，但是在windows中测试过，它们都给出了相同的问题），map并没有完全加载。
当我点击地图加载的标签时，只有地图的一部分完全可以操作，其余的是灰色的，不可点击。
请看下面的链接，点击firefox / safari和IE中的第三个标签，你会看到这个问题。

http://movewithusoverseas.com/index-new.php?z=product -info.html& pid = 1

我不知道这是jQuery UI代码中的错误还是我做错了。
如果我从标签中加载地图，地图显示OK。

我正在为这个问题争取一周半的时间...任何帮助将不胜感激。

在此先感谢。
Luis

解决方案

当用户打开第三个标签时，需要调用 map.checkResize（）。

问题是这样的：初始化地图时，第三个选项卡不可见，并且地图尺寸不正确。尝试调整浏览器窗口的大小（这将调用checkResize），并且您会注意到地图会自行修正。

jQuery UI文档展示了如何将一个事件绑定到标签。这应该适用于你的页面：

$ p $ $（'＃tabs'）。bind（'tabsshow'，function（event，ui ）{
if（ui.panel.id ==tabs-3）{
map.checkResize（）;
}
}）;


更新：Luis指出你也可以用off-left技术：

  .ui-tabs .ui-tabs-hide {
 position：absolute; 
 left：-10000px; 
} 
  

I started using jQuery as soon as I found out about it, it is very powerfull but I started struggling when I tried to load Gmaps api into the tabs jQuery UI brings. Strangly enough in IE 6,7,8 it works fine, but in Firefox, Safari (I'm using mac but tested it in windows and they both give the same problems) the map doesn't load entirely. When I click on the tab where the map loads in, only part of the map is fully operational, the rest is grey and not clickable. Please take a look at the link below and click the third tab in firefox/safari and IE and you will see the problem.

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

I don't know if it is a bug in the jQuery UI code or I'm doing something wrong. If I load the map out of the tabs the map is shown OK.

I'm fighting with this problem for a week and a half... any help will be much appreciated.

Thanks in advance. Luis

解决方案

When the user opens the third tab, you need to call map.checkResize().

The problem is this: when you initialize the map, the third tab isn't visible, and the map is sized incorrectly. Try adjusting the size of your browser window (this calls checkResize) and you'll notice that the map corrects itself.

The jQuery UI documentation shows how you can bind an event to the opening of a tab. This should work for your page:

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

Update: Luis points out that you can also solve this problem with the off-left technique:

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

这篇关于jQuery UI + Gmaps =问题（对我来说至少）帮助！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！