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> 

如果我使用不同iframe出多於一個的iframe中呈現了jQuery標籤的。所以

<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

問候， faiko

Answer 1

iframe的加載初始隱藏狀態，代碼基本上是從隱藏的人得到一個爲0x0尺寸。您可以選擇加載標籤點擊或刷新框架。你可以看到，如果你去http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2只有可見的人得到正確渲染。

對於如何重新加載iframe，我將在這裏推遲What's the best way to reload/refresh an iframe using JavaScript?。

你可以從空白的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綁定點擊處理程序將在首次激活後解除處理程序綁定，因此您不必不必要地重新添加。 「超時0」技巧只是一種延遲的方式，直到後瀏覽器再次控制，並應在之後添加 面板顯示。

該技術的快速演示：http://jsfiddle.net/ambiguous/FMBcE/