2012-06-29 3 views
3

Я работаю над проектом пользовательской панели, где пользователь может взаимодействовать с виджетами (очень похоже на панель iGoogle). Я использую портлеты jQueryUI для хранения iframes. Проблема, с которой я сталкиваюсь, заключается в том, что я хотел бы изменить размер iframe в режиме реального времени, когда содержимое внутри iframe будет расширяться с использованием анимации jQuery. Например, у меня есть пользовательский контроль аккордеона внутри iframe. Когда пользователь нажимает на панель для расширения аккордеона, я вызываю функцию slideDown() для отображения содержимого. Когда анимация slideDown() завершена, я изменяю размер iframe на основе новой высоты тела. В результате содержимое аккордеона скользит вниз, пока они не выйдут за пределы виджета во время анимации слайдов. Как только анимация будет завершена, размер изменяет размер новой виджеты, и все выглядит хорошо. Это довольно прерывистая анимация, и я хотел бы изменить размер iframe, чтобы он расширялся до высоты тела iframe во время анимации slideDown(). Что я могу сделать, чтобы расширить iframe на основе высоты тела во время анимации слайдов?Развернуть iframe во время анимации jQuery Когда содержимое Развернуть

Вот код, который я использую в настоящее время.

// This code gets fired on an accordion panel click event. 
content.slideDown(100, function() 
{ 
    parent.expandContainer('panel1', $('body').height()); 
});  

// This code resides in the parent page hosting the iframes. 
function expandContainer(elementId, height) 
{ 
    $('#' + elementId).children('.content').find('iframe').css('height', height + 'px'); 
} 
+0

Попробуйте установить «верх» и «снизу» на 0 вместо высоты: 100%; – RhinoWalrus

+0

Я пробовал, и он не работает. Не являются ли эти свойства для абсолютно позиционированных элементов? – Halcyon

+0

Они есть. Просто альтернатива, если вы не возражаете против абсолютно позиционирования вашего iframe. – RhinoWalrus

ответ

-2

Из моих исследовательских фреймов невозможно расширить. Им должна быть задана фиксированная ширина & высота.

+0

Вы серьезно? попробуйте этот подход: http://algorhythm.de/tools/resizeable-iframe/index.html – algorhythm

+0

Конечно, они могут быть изменены. Вопрос заключается в том, чтобы точно изменить его с помощью аккордеона (как определить, когда переход будет выполнен?) – Bachi

1

Возможно, вам нужно сделать свой один аккордеон, чтобы получить шаг-событие выполненной анимации.

Я создал анимированную коробку. если поле становится больше или меньше, то шаг-событие вызывает функцию resizeIframe (высота). Эта функция снова вызывает одноименную функцию resizeIframe (высота) в исходном документе. попробуйте эту демку:

http://algorhythm.de/tools/resizeable-iframe/index.html

0

JQuery аккордеон имеет событие в его API, который вызывается, когда анимация завершена:

Срабатывает после панель была активирована (после того, как анимация завершена). http://api.jqueryui.com/accordion/#event-activate

Используя это событие, чтобы вызвать изменение размеров IFrame отлично работает для меня.

Смежные вопросы