Alejandro Moraga 9 December 2010 – 6:32 am

Interface com abas

tabs-interface

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.