firefox - jQuery UI + Gmaps = 问题(至少对我来说)帮助!

Question

我一发现 jQuery 就开始使用它，它非常强大，但是当我尝试将 Gmaps api 加载到 jQuery UI 带来的选项卡中时，我开始挣扎。奇怪的是，在 IE 6、7、8 中它工作正常，但在 Firefox、Safari(我使用的是 mac，但在 Windows 中进行了测试，它们都给出了相同的问题)中， map 无法完全加载。当我单击加载 map 的选项卡时，只有部分 map 可以完全运行，其余部分呈灰色且不可单击。请查看下面的链接，然后单击 firefox/safari 和 IE 中的第三个选项卡，您就会看到问题。

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

我不知道这是 jQuery UI 代码中的错误还是我做错了什么。如果我从选项卡中加载 map ， map 将显示正常。

我与这个问题斗争了一个半星期...任何帮助将不胜感激。

提前致谢。路易斯

Answer 1

当用户打开第三个选项卡时，需要调用map.checkResize() .

问题是这样的:初始化 map 时，第三个选项卡不可见，并且 map 大小不正确。尝试调整浏览器窗口的大小(这称为 checkResize)，您会发现 map 会自行更正。

jQuery UI documentation显示如何将事件绑定(bind)到选项卡的打开。这应该适用于您的页面:

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

更新:路易斯指出，您还可以使用左偏技术解决此问题:

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