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

Я хочу использовать вкладки из пользовательского интерфейса jQuery (Источник: 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>

Если я использую iframes из вкладок 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

привет, фаико


jquery webgl jquery-ui collada glge
person faiko    schedule 13.01.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person Scottux    schedule 13.01.2012

arrow_upward
2
arrow_downward

Может ли быть так, что <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/

person mu is too short    schedule 13.01.2012