Abas de conteúdo com efeito Flipping usando JQuery

Oct 17, 2010 by Sergio Novelli    10 Comments    Posted under: JQuery

A partir de hoje, vou dar início a uma série de posts em forma de tutoriais de recursos que uso diariamente e recomendo para todo programador ou webdeveloper. Os posts estarão relacionados com várias linguagens de programação, começando com JQuery.

E para começar, vamos fazer um lindo efeito de Flipping, com navegação de conteúdo por abas. Lembrando que este tutorial é uma tradução. No final estão os links originais do autor. Boa leitura!

Abas de conteúdo se tornaram mais populares recentemente com mais e mais sites e blogs de usá-los para mostrar mais conteúdo em pouco espaço. Hoje eu vou mostrar como criar abas de conteúdo com um efeito de transição bem agradável.

Para isso, você vai precisar do Plugin jQuery QuickFlip desenvolvido por Jon Raasch e, claro, a versão mais recente da biblioteca jQuery.

A estrutura HTML

<div id="flip-tabs">
<ul id="flip-navigation">
<li class="selected"><a id="tab-0" href="#">Recent</a></li>
<li><a id="tab-1" href="#">Popular</a></li>
<li><a id="tab-2" href="#">Comments</a></li>
</ul>
<div id="flip-container">
<div><!--Put Content for first tab here--></div>
<div><!--Put Content for second tab here--></div>
<div><!--Put Content for third tab here--></div>
</div>
</div>

Você pode adicionar quantas guias precisar e acrescentar outras div’s dentro da div container-flip, e também, adicionar novas entradas na lista flip-navigation para criar uma nova guia de navegação. O campo id de uma tag a na lista de itens de flip-navigation são importantes.
Os id’s são o tipo da tab-x onde x é o índice da div conteúdo no container-flip. O índice começa do zero, então se você adicionar um novo div abaixo da div de conteúdo, terceiro, então o id do link correspondente a navegação será aba-3.

Outro aspecto importante é a classe CSS selecionada, que é adicionada ao item de navegação correspondente ao guia conteúdo que está aberta atualmente.

Os estilos CSS

Aqui estão alguns estilos aplicados à estrutura HTML acima. Estes podem ser personalizados como você quiser.

#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#fff;
}

O código JavaScript

Finalmente, o código javascript que irá fazer o trabalho difícil:

$('document').ready(function(){
//initialize quickflip
$('#flip-container').quickFlip();

$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
//extract index of tab from id of the navigation item
var flipid=$(this).attr('id').substr(4);
//Flip to that content tab
$('#flip-container').quickFlipper({ }, flipid, 1);

return false;
});
});
});

Explicação: Na linha 3, nós iniciamos o plugin quickflip, chamando-o pelo id flip-container. Um aspecto a ter em mente é que se você mudar o id do div flip-container, lembre-se de alterá-lo em JavaScript também.
Depois que o evento clique de lista de navegação é controlada e ao clicar, o item clicado é adicionado a classe CSS selecionada e chamamos a função quickFlipper() para virar a aba de conteúdo selecionada.

A função quickFlipper() permite controlar a velocidade do efeito de navegação, ao fornecer opções no primeiro e segundo parâmetros. Por exemplo:

quickflipper({ openSpeed:200, closeSpeed:250 }, flipid, 1);

Além disso, não altere o terceiro parâmetro  que é o número de vezes que o evento flip ocorre. Você pode ler mais sobre função quickFlipper clicando aqui.

Veja uma demonstração e baixe o código aqui.

Título original: Create Flipping Content Tabs Using jQuery
Artigo original: http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/
Traduzido por Google Tradutor e adaptado por Sérgio Novelli

Espero que tenham gostado. Deixem seus comentários e não percam o próximo post!