jQueryタブメニューとWebGL

Question

WebGL GLGE（ソース：http://www.glge.org/）を使用して、各タブにCOLLADA daeファイルを表示するには、jQuery UIのタブ（ソース：http://jqueryui.com/demos/tabs/）を使用します。タブは、XMLファイルに応じて動的に生成される必要があります。すべてが計画どおりに機能し、3Dオブジェクトのレンダリングだけが機能しません。

私は今、さまざまなアプローチを試みましたが、いずれも機能しませんでした。結果は毎回同じです。 3D COLLADAオブジェクトは、最初のタブでのみレンダリングされます。 xmlからデータを取得せずに基本および静的document.writeステートメントを使用しても、最初のページの建物だけが表示されます。例については

：私はjQueryのタブのうち、アイフレームを使用している場合

<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 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> 

は、タブの上に3つのレンダリングされた3Dオブジェクトを持ち込みます。

私の問題を理解して助けてくれることを願っています。

編集： 私はちょうど上記の "単純な"例をアップロードしました。コードは基本的に隠されたものから0x0の寸法を取得し、 faiko

Answer 1

のiframeが最初に隠された状態でロードされ、 http://korb.cwsurf.de/tmp/buildingdetail_simple.html

挨拶：あなたは下にそれを見ることができます。タブでクリックしてロードするか、フレームをリフレッシュするかを選択できます。 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/