Меню вкладок jQuery и WebGL - PullRequest
Новая
       33

Меню вкладок jQuery и WebGL

1 голос
/ 13 января 2012

Я хочу использовать вкладки из jQuery UI (Источник: http://jqueryui.com/demos/tabs/), чтобы отобразить на каждой вкладке файл COLLADA dae с помощью WebGL GLGE (Источник: 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 из вкладок jQuery, отображается более одного 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-объекта над вкладками.

Надеюсь, ты сможешь понять мою проблему и помочь мне.

EDIT: Я только что загрузил приведенный выше «простой» пример. Вы можете увидеть это под: http://korb.cwsurf.de/tmp/buildingdetail_simple.html

привет, faiko

Ответы [ 2 ]

2 голосов
/ 13 января 2012

Может ли быть так, что <iframe> должны быть видны (или, по крайней мере, иметь не скрытых родителей), прежде чем они узнают, что делать с собой?Ранее я видел странные проблемы с размером и расположением невидимых вкладок, возможно, вы видите похожую проблему.

Вы можете попробовать добавить <iframe> s после , показывающего вкладку.Примерно так: 

$('#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 для привязки обработчика кликов приведет к отмене привязки обработчика после его первой активации, так что вам не нужно будет без необходимости повторно добавлять <iframe> s.Трюк с «тайм-аутом 0» - это просто способ отложить что-то до тех пор, пока после браузер не получит контроль, и это должно добавить <iframe> после , когда отображается панель.

Быстрая демонстрация техники: http://jsfiddle.net/ambiguous/FMBcE/

2 голосов
/ 13 января 2012

iframe загружен с изначально скрытым состоянием, код в основном получает размеры 0x0 от скрытых. Вы можете загрузить клик по вкладке или обновить фрейм. Вы можете видеть, что если вы перейдете к http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2, то только видимый будет отображен правильно.

Я отложу здесь Какой лучший способ перезагрузить / обновить iframe с помощью JavaScript? о том, как перезагрузить iframe.

Вы можете начать с пустой ссылки, а затем заполнять ее только при нажатии на вкладку. Или отрендерить все это, затем вызвать вкладки после загрузки кадров.

...