Interface com abas
Exemplo. Testado no IE7, IE8, Chrome e Firefox.
A primeira tarefa é criar o HTML. Nada muito complicado, abas em li e o conteúdo em div. Tudo mantido dentro de uma div principal que usaremos para executar o jQuery.
<div class="tabs"> <ul> <li class="in">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <div style="display:block"> Conteúdo do item 1 </div> <div> Conteúdo do item 2 </div> <div> Conteúdo do item 3 </div> <div> Conteúdo do item 4 </div> </div>
Na aba que decidir iniciar o conteúdo coloque class="in" e na div corresponde style="display:block". Pode ser na primeira aba, segunda, terceira ou qualquer outra.
A próxima tarefa é o CSS. A partir do CSS básico mostrado aqui, faça suas implementações, mude cores, fundos, bordas, etc.
.tabs > ul {
bottom: -1px;
color: #606060;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.tabs > ul li {
background: #d2d6d9;
color: #858f98;
cursor: pointer;
display: block;
font-weight: bold;
float: left;
margin-right: 3px;
padding: 3px 5px;
position: relative;
}
.tabs .in {
border-color: #ccc;
border-style: solid;
border-width: 1px 1px 0;
color: #666;
cursor: default;
z-index: 1;
}
.tabs > div {
border: 1px solid #ccc;
display: none;
padding: 10px;
overflow: hidden;
}
.tabs .in, .tabs > div {
background-color: #f5f5f5;
}
Agora vem o Javascript. Leia os comentários no código para entender melhor o funcionamento do plugin.
<script type="text/javascript">
(function($) {
$.fn.extend({
tabs: function(options) {
options = $.extend({
// velocidade de troca das abas
transition: 'normal',
// ativa ou desativa a mundança automática
autotab: false,
// tempo de permencia em cada aba
delay: 5000,
}, options);
return this.each(function() {
var self = $(this), tabs = self.children('ul').children(), divs = self.children('div'), i = 0, timer = null;
// adiciona um evento para que no clique as abas sejam trocadas
tabs.click(function() {
tabs.removeClass('in');
$(this).addClass('in');
divs.hide();
// encontra a posição da aba clicada
i = tabs.index(this);
$(divs[i]).fadeIn(options.transition);
// se a mudança automática estiver ativa, o temporizador é reiniciado
if (options.autotab)
resetTimer();
});
// executa a inicialização do temporizador
if (options.autotab)
startTimer();
// função para iniciar o temporizador
function startTimer() {
timer = window.setInterval(showNext, options.delay);
}
// função para reiniciar o temporizador
function resetTimer() {
window.clearTimeout(timer);
startTimer();
}
// função para mostrar a próxima aba
function showNext() {
// encontra a aba que deverá ser exibida
if (tabs.length > i + 1)
i++;
else
i = 0;
tabs.removeClass('in');
$(tabs[i]).addClass('in');
divs.hide();
$(divs[i]).fadeIn(options.transition);
}
});
}
});
})(jQuery);
</script>
Configuração
Podemos configurar a duração do efeito de transição, troca automática de abas e o intervalo de exibição de cada aba.
Configuração padrão:
{
transition: 'normal',
autotab: false,
delay: 5000
}
Duração do efeito de transição
O efeito de transição é o aparecer e desparecer da aba e do conteúdo. Aceita os valores: slow, normal, fast e o tempo milisegundos.
Troca automática
Por padrão as abas ficam fixas, somente são trocadas quando o usuário clica sobre uma aba. Ao definir o valor como true as abas se alternam conforme o tempo configurado no item abaixo.
Intervalo de exibição de cada aba
É o tempo que leva para de uma aba passar para outra. Modifique de acordo com o conteúdo exibido em suas abas.