jQuery 选项卡菜单和 WebGL

Question

我想使用 jQuery UI 中的选项卡（来源：http://jqueryui.com/demos/tabs/) 使用 WebGL GLGE 在每个选项卡上显示 COLLADA dae 文件（来源：http://www.glge.org/）。选项卡应根据 xml 文件动态生成。一切都按计划进行，只是 3D 对象的渲染不起作用。

我现在尝试了不同的方法，但没有一个有效。结果每次都一样。 3D COLLADA 对象仅在第一个选项卡上呈现。 即使我使用基本和静态的 document.write 语句而不从 xml 中检索数据，也只会显示第一页上的建筑物。

例如：

<div id="tabs">
  <div id="tabs-1">
     //ONLY THIS OBJECT IS RENDERED
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-2">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-3">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>

如果我使用 jQuery 选项卡中的 iframe，则会呈现多个 iframe。因此

<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<div id="tabs">
     //codehere
</div>

，在选项卡上方带来了三个渲染的 3D 对象。

希望您能理解我的问题并帮助我。

编辑： 我刚刚上传了上面的“简单”示例。您可以在下面看到它： http://korb.cwsurf.de/tmp/buildingdetail_simple.html

问候， 法伊科

Answer 1

iframe 加载了一个初始隐藏状态，代码基本上从隐藏状态获取 0x0 尺寸。您可以选择在选项卡单击时加载或刷新框架。如果您转到 http://korb.cwsurf.de/ tmp/buildingdetail_simple.html#tabs-2 只有可见的部分才能正确渲染。

我将推迟到这里 重新加载的最佳方式是什么/ 使用 JavaScript 刷新 iframe？ 了解如何重新加载 iframe。

您可以从空白 href 开始，然后仅在单击选项卡时填充它。或者渲染全部，然后在帧加载后调用选项卡。

Answer 2

难道 需要可见（或者至少有非隐藏的父级）才能知道如何处理自己？我以前见过不可见选项卡的奇怪大小和定位问题，也许您也看到了类似的问题。

您可以尝试在显示选项卡之后添加。像这样的事情：

$('#tabs').tabs();
$('#tabs a:not(:first)').one('click', function() {
    var tab = this.href.replace(/.*#/, '#');
    setTimeout(function() {
        // Add the appropriate <iframe> here.
        $(tab).append('<iframe src="..."></iframe>');
    }, 0);
});

假设第一个已经打开（因此 :not(:first)）。使用 one 绑定点击处理程序将在第一次激活后取消绑定处理程序因此您不必不必要地重新添加 。 “timeout 0”技巧只是一种延迟某些事情的方法，直到浏览器再次获得控制权之后，并且应该添加 after > 显示面板。

该技术的快速演示：http://jsfiddle.net/ambigously/FMBcE/