Documentação do Plugin QuickFlip para jQuery

Created by Jon Raasch

QuickFlip 2 for jQuery é um plugin que "vira" qualquer elemento html parecendo uma carta. O plugin suporta qualquer tag e estilo (não testei com animações e outros "objects"), e utiliza um atalho de animação que é notável quando acionado rapidamente.

Baixar o Plugin QuickFlip para jQuery →

Uso básico de QuickFlip 2

Vamos começar com o HTML. Quando QuickFlip é utilizado com vários elementos, nós precisamos de um seleto para cada um deles, que será algo parecido como: 

<div class="quickflip-wrapper">
    <div>Conteúdo inicial (Frente)</div>

    <div>Conteúdo oculto (Verso)</div>

</div>

Certifique-se de que a biblioteca do jquery e do plugin (jquery.quickflip.js) foram inclusos no seu arquivo, então chame $.quickFlip() em seu código quando a página é carregada: 

$(function() {
    $('.quickflip-wrapper').quickFlip();
});

Isto irá anexar o QuickFlip a esse seletor. QuickFlip automaticamente atribui um evento clique para nada com a classe "quickFlipCta". Para aproveitar esta podemos usar um par links: 

<div class="quickflip-wrapper">
    <div>
    <a href="#" class="quickFlipCta">Clique para exibir a frente</a>
    </div>

    <div>
    <a href="#" class="quickFlipCta">Clique para exibir o verso</a>
    </div>
</div>

Como alternativa, podemos disparar o efeito flip usando a função $ quickFlipper. () . Pode ser usado com qualquer seletor jQuery: 

$('.quickflip-wrapper').quickFlipper();

Isto pode ser anexado a um clique ou evento hover, ou a função personalizada de sua escolha. Além disso, $ quickFlipper. () irá iniciar a QuickFlip se $ QuickFlip. () ainda não foi chamado pelo seletor informado. No entanto é o melhor pré-carregar a QuickFlip por motivos de desempenho.

(Se você usa somente $ quickFlipper. () deve predefinir alguns estilos CSS: position: relative para o seu seletor e position: absolute para cada painel de dentro)

Exemplos QuickFlip

Funções do plugin QuickFlip 2

$.quickFlip( options )

Inicializa o QuickFlip ao seletor, unindo estilos CSS e acrescentando elementos necessários ao DOM.

options (Object)
Valores de opção (veja abaixo).

$.quickFlipper( options, nextPanel, repeater )

Distapara o efeito flip. Se $.quickFlip() não foi chamado no seletor informado, $.quickFlipper() irá chamá-lo primeiro.

options (Object)
Valores de opção (veja abaixo). Estas opções irão reescrever qualquer configuração do $.quickFlip().

nextPanel (Integer)
Índice do próximo painel a ser mostrado. Por padrão é null que mostra automaticamente o próximo painel no DOM, retornando para o primeiro painel, se este não existe.

repeater (Integer)
Número de vezes para "virar" o elemento, altere para -1 para repetir indefindamente.

$.whichQuickFlip()

Determina o índice do seletor QuickFlip que é chamado. Isto é mais para uso avançado, e ajuda com a interface da função $ quickFlip.flip. () (Veja abaixo).

Opções personalizadas para o QuickFlip 2

closeSpeed (Number)
Número em milisegundo que leva para virar e mostrar o painel frontal.

openSpeed (Number)
Número em milisegundos que leva para virar e mostrar o painel traseiro.

easing (String)
Se você estiver usando o plugin jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) passe a string com o método que você quer usar. Há também dois métodos easing contruidos dentro do jQuery, linear e swing. Por padrão o easing está configurado como swing.

ctaSelector (jQuery Selector String)
QuickFlip anexa um evento de clique para o seletor jQuery que dispara o efeito. Altere para '', 0 ou null para finalizar o processo e acelerar as coisas (um pouco).

refresh (Boolean)
Prove uma opção para atualizar a animação a cada vez que o efeito é chamado. Isto é útil se o conteúdo dentro do flip muda visualmente, contudo é desligado por padrão por questão de desempenho.

panelWidth (Number or CSS string)
Isto configura a largura do painel estaticamente, e impede que o plugin de gere automaticamente esse valor com base nas dimensões do painel (isto também pode ser realizado através de CSS simples).

panelHeight (Number or CSS string)
Assim como a largura, esta opção define o valor da altura estaticamente para previnir que a altura seja gerada automaticamente (também pode ser feito com CSS).

Solução de problemas - QuickFlip 2

QuickFlip está removendo margin/padding dos painéis

Animação exige que os elementos do painel e o elemento principal não tenham margin ou padding, por isso o script forças estas definições quando ele carrega.

No entanto o elemento interior de cada painel pode ter qualquer estilo, por isso use um elemento interior se você precisa de margin ou padding.

Partes dos painéis estão sendo cortadas

QuickFlip puxa automaticamente para a largura e altura do primeiro painel do elemento quando $ QuickFlip. () é chamado. Isto pode causar problemas se algum dos painéis posteriores são menores do que o primeiro, ou se carrega o conteúdo de forma dinâmica para o painel (por exemplo, se carrega uma imagem).

A maneira mais fácil de contornar este problema é definir uma altura e largura para o painel QuickFlip, ou via CSS ou usar o panelHeight panelHeight e panelWidth QuickFlip.

Quando a página carrega e os painéis acionados, o efeito fecha

Quando $ QuickFlip. () carrega algum CSS para esconder os elementos pode ser que ocorra um breve piscar quando a página é carregada, a menos que você aplique esse CSS antes do carregamento.

Os principais estilos a aplicar são position: relative para o elemento QuickFlip, e position: absolute para os painéis interiores. Você também pode querer definir uma altura e largura do painel de mensagens publicitárias.

Outras questões a altura e a largura do painel

Se você está tendo problemas com altura e largura, tente aplicar uma altura e largura para a capa QuickFlip principal ou via CSS ou usar o panelHeight e panelWidth .

Problemas conhecidos

  • Há um problema com CSS aplicado nas bordas inferiores sendo escondido durante a animação flipping. Esse problema é devido à altura a ser calculada incorretamente, que esconde o estouro. Não há atualmente nenhuma correção nos trabalhos para esta questão.
  • Um espaço em vazio é mostrado durante o efeito quando Firebug está ativado e o QuickFlip é chamado por um seletor com a largura baseada em porcentagem da tela. Isto não ocorre quando o firebug está minimizado, então não chega a ser um grande problema.

Licensa do QuickFlip 2

QuickFlip 2 está sob a licensa FreeBSD:

Copyright (c) 2009 Jon Raasch (http://jonraasch.com/)

Redistribuição e uso na origem e binário, com ou sem modificação, são permitidas desde que as condições sejam satisfeitas as seguintes:

  1. As redistribuições do código-fonte devem manter o aviso de copyright acima, aviso esta lista de condições e a seguinte.
  2. As redistribuições na forma binária devem reproduzir o aviso de copyright acima, esta lista de condições e a seguinte exclusão de responsabilidade na documentação e / ou outros materiais fornecidos com a distribuição.

THIS SOFTWARE IS PROVIDED BY JON RAASCH 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL JON RAASCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

ESTE SOFTWARE É FORNECIDO POR JON RAASCH 'COMO ESTÁ' E QUALQUER GARANTIA EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO, ÀS GARANTIAS DE COMERCIALIZAÇÃO E ADEQUAÇÃO PARA UMA FINALIDADE ESPECÍFICA. EM HIPÓTESE ALGUMA AOS COLABORADORES DE JON RAASCH OU SER RESPONSABILIZADOS POR DANOS DIRETOS, INDIRETOS, INCIDENTAIS, ESPECIAIS, EXEMPLARES OU CONSEQÜENCIAIS (INCLUINDO, MAS NÃO LIMITADO A, OBTENÇÃO DE BENS OU SERVIÇOS, PERDA DE USO, DADOS, LUCROS OU INTERRUPÇÃO DO NEGÓCIO) CAUSADOS E EM QUALQUER TEORIA DE RESPONSABILIDADE, SEJA EM CONTRATO, RESPONSABILIDADE ESTRITA OU DELITO (INCLUINDO NEGLIGÊNCIA OU NÃO) LEVANTADA DE QUALQUER FORMA PELO USO DESTE SOFTWARE, MESMO SE INFORMADO DA POSSIBILIDADE DE TAIS DANOS.

As opiniões e conclusões contidas no software e documentação são de responsabilidade dos autores e não deve ser interpretado como representando as políticas oficiais, expressa ou implícita, de Jon Raasch.