Criando uma estrutura de abas com HTML, CSS e jQuery

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (6)  (0)

Veja neste artigo como desenvolver uma estrutura simples de abas utilizando apenas as web standards, observando as facilidades que essas tecnologias nos trazem, principalmente em suas mais recentes versões.

Certo dia me perguntei o quão complexo seria desenvolver um esquema de “abas” em HTML, partindo do zero. Existem vários plugins com essa funcionalidade na internet, porém, senti a necessidade de “praticar”, numa forma de explorar os recursos das tecnologias atualmente disponíveis e ver a que ponto elas realmente são “práticas” e “ágeis”.

O primeiro ponto seria desenvolver as abas com bordas arredondadas na parte superior. Antes das CSS3, era preciso montar todo um esquema utilizando várias imagens para simular essa borda, hoje, com a propriedade border-radius, essa passou a ser uma tarefa simples.

Tendo resolvido a primeira questão, o próximo passo seria tratar a “troca” de abas, alternando entre as “páginas” do conteúdo. Não existe um controle que se possa moldar como uma aba+página, logo, seria necessário dividir o componente em duas partes: cabeçalho (com as abas) e conteúdo (com as páginas contendo outros elementos quaisquer). Surge aí a primeira, digamos, dificuldade. Ao clicar em um elemento do cabeçalho, a respectiva página deveria ser selecionada. Em termos de design, seria interessante também que a aba selecionada tivesse um destaque em relação as outras. Sem problemas, o jQuery está aí para facilitar todo esse processo.

Vejamos então como ficou a estrutura do HTML (o primeiro passo):

Listagem 1: Estrutura do HTML

<div class="TabControl">
	<div id="header">
		<ul class="abas">
			<li>
				<div class="aba">
					<span>Tab 1</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 2</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 3</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 4</span>
				</div>
			</li>
		</ul>
	</div>
	<div id="content">
		<div class="conteudo">
			Conteúdo da aba 1
		</div>
		<div class="conteudo">
			Conteúdo da aba 2
		</div>
		<div class="conteudo">
			Conteúdo da aba 3
		</div>
		<div class="conteudo">
			Conteúdo da aba 4
		</div>
	</div>
</div>

A estrutura é bastante simples: uma div chamada TabControl que contém duas divs principais em seu interior, as divs Content e Header.

Essa estrutura sozinha não faz muito sentido, é preciso aplicar uma folha de estilos para dar a ela a aparência adequada. O estilo (CSS) é exibido na Listagem 2 (no caso, utilizei a folha de estilos embutida no HTML, mas fica a critério do leitor optar por fazer dessa forma ou criar um arquivo externo).

Listagem 2: Folha de estilos utilizada

<style>
	body{font-family:Calibri, Tahoma, Arial}
	.TabControl{ width:100%; overflow:hidden; height:400px}
	.TabControl #header{ width:100%; border: solid 1px; overflow:hidden; cursor:hand}
	.TabControl #content{ width:100%; border: solid 1px;overflow:hidden; height:100%; }
	.TabControl .abas{display:inline;}
	.TabControl .abas li{float:left}
	.aba{width:100px; height:30px; border:solid 1px; border-radius:5px 5px 0 0;
		text-align:center; padding-top:5px; background:#3A5FCD}
	.ativa{width:100px; height:30px; border:solid 1 px; border-radius:5px 5px 0 0;
		text-align:center; padding-top:5px; background:#27408B;}
	.ativa span, .selected span{color:#fff}
	.TabControl #content{background:#27408B}
	.TabControl .conteudo{width:100%;  background:#27408B; display:none; height:100%;color:#fff}
	.selected{width:100px; height:30px; border:solid 1 px; border-radius:5px 5px 0 0;
		text-align:center; padding-top:5px; background:#27408B}
</style>

Após a aplicação destes estilos, a página deve ficar como na Figura 1.

Aparência inicial da página

Figura 1: Aparência inicial da página

Clicando sobre as abas, nada acontece AINDA. Falta implementar os scripts que darão “vida” ao TabControl.

O primeiro script a adicionar, é, na verdade, uma ligação à biblioteca jQuery, que é feita da seguinte forma:

Listagem 3: Referência à biblioteca jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Agora sim vamos ao script foco deste artigo, o qual pode ser visto na Listagem 4.

Listagem 4: Script de implementação das abas

01 <script type="text/javascript">
02 	$(document).ready(function(){
03 		$("#content div:nth-child(1)").show();
04 		$(".abas li:first div").addClass("selected");		
05 		$(".aba").click(function(){
06 			$(".aba").removeClass("selected");
07 			$(this).addClass("selected");
08 			var indice = $(this).parent().index();
09 			indice++;
10 			$("#content div").hide();
11 			$("#content div:nth-child("+indice+")").show();
12 		});
13 		
14 		$(".aba").hover(
15 			function(){$(this).addClass("ativa")},
16 			function(){$(this).removeClass("ativa")}
17 		);				
18 	});
19 </script>

Antes de tudo (nas linhas 3 e 4, respectivamente), deixamos visível a primeira página do TabControl, e adicionamos a classe selected à primeira aba.

Feito isso, trabalhamos no evento onclick das divs que se encontram no interior dos itens da lista que forma o cabeçalho. A explicação de cada linha segue logo abaixo:

6. Remove a classe selected de todas as abas que possam contê-la, deixando todas em estado comum.

7. Adiciona a classe selected à aba selecionada, dando a ela uma aparência diferenciada.

8. Recupera o índice da aba selecionada a partir da posição do item (<li>) que contém a div.

9. Incrementa a variável índice para ser usada no seletor nth-child(índice), pois a posição dos itens <li> começa em zero, enquanto no seletor nth-child, o primeiro índice é 1.

10. Esconde todas as páginas que pudessem estar visíveis no momento (apesar de só uma poder ser selecionada, não sabemos qual é exatamente).

11. Seleciona a página selecionada através da variável índice e a torna visível.

Por último, apenas a nível de design, usamos o evento hover das abas para alterar sua aparência ao passar o cursor do mouse sobre elas. A sintaxe desse evento é exibida na Listagem 5.

Listagem 5: Sintaxe do evento hover

$(elemento).hover(
	function(){/*função a ser executada ao pôr o cursor sobre o elemento*/},
	function(){/*função a ser executada ao tirar o cursor do elemento*/}
);

No caso, adicionamos a classe ativa ao passar o cursor sobre as abas e, ao removê-lo, removemos também a classe.

Bem, o artigo é bem simples, mas teve por objetivo mostrar, através de um exemplo prático, como as novas tecnologias web podem facilitar nossas vidas, tornando simples o que era tão complexo há pouco tempo.

Espero que tenham gostado. Um abraço e até a próxima oportunidade.

Leia o artigo Estrutura de abas com botão fechar em HTML, CSS e jQuery

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?