JQuery переключается между существующими div

Я нашел множество плагинов jQuery, которые позволяют вам «переворачивать» элемент; Плагин SmashUp Labs Flip! кажется наиболее популярным/полезным, и именно его я сейчас использую.

Между тем, конечно, здесь и в других местах есть множество решений для переключения между двумя разными существующими div, но ни одно из них не касается переключения.

Но мне нужно, чтобы обе вещи произошли. Проблема, которую я нахожу с Flip! заключается в том, что он включает содержимое как часть вызова функции, в то время как я действительно хочу использовать флип для переключения между двумя разными существующими div. Я получил это, чтобы выглядеть более или менее правильно, используя iframe, но затем я использую довольно ненужный iframe, и мне также приходится ждать, пока этот кадр загрузится после переворота, что выглядит плохо.

Обе «стороны» перевернутого div слишком велики и сложны, чтобы их можно было разумно вставить в вызов функции, и я не могу использовать что-то вроде $('div').text(), потому что это создает копию div, а не показывает тот, который у меня уже есть.

Итак, кто-нибудь знает какую-нибудь библиотеку, которая выполняет перелистывание, но позволяет указать элемент, который будет отображаться после завершения перелистывания? Или кто-нибудь делал подобные вещи с Flip!, возможно, используя его функции обратного вызова?


toggle jquery flip
person KRyan    schedule 26.07.2012    source источник
comment
+1 за то, что привел меня к Флипу!   -  person cbmeeks    schedule 03.06.2014

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете попытаться поместить два div поверх флип-бокса, используя абсолютную позицию CSS, чтобы содержимое div было поверх фона флип-бокса, выглядело так, как будто оно находится в поле.

Например, у вас есть div1 и div2, по умолчанию при загрузке страницы отображается div1, а div2 имеет стиль display:none, затем вы подключаете обратные вызовы в Flip, например:

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
        $('#div1').hide();
    },
    onEnd: function(){
        $('#div2').show();
    }
});

Оба содержимого div1 и div2 находятся поверх флип-бокса, поэтому они выглядят как содержащиеся.

person Drawyan    schedule 26.07.2012
comment
Это возможно, хотя я с подозрением отношусь к абсолютному позиционированию в середине гибкого дизайна. Я попробую и дам вам знать, как это происходит. - person KRyan; 26.07.2012
comment
Это действительно сработало на удивление хорошо. На самом деле в любом случае нет необходимости использовать абсолютное позиционирование, так как скрытый div не занимает места: я просто установил для обоих div значение width: 100%; height: 100%;, и поскольку отображался только один, это сработало отлично. - person KRyan; 27.07.2012
comment
Звучит здорово, я не пробовал это, но я пробовал этот трюк для других подобных вещей. Рад, что это сработало, стиль display:none не занимает места, но если вы хотите, чтобы он занимал место, используйте стиль visible:hidden, который будет занимать размер скрытого div, это очень полезно, если вы не Не хотите менять положение элементов во время показа и скрытия. - person Drawyan; 27.07.2012