Quando estamos montando a interface gráfica de uma aplicação, independente de plataforma, existem alguns componentes e modelos mais comuns e que se fazem presentes em grande parte das aplicações. A organização das informações em abas/guias é um exemplo comum disso.

Nativamente a linguagem HTML não oferece nenhum componente desse tipo, por isso precisamos recorrer a bibliotecas de terceiros, que atualmente são várias disponíveis na internet.

jQuery Tabs

A biblioteca jQuery, mais precisamente a jQuery UI é uma das bibliotecas mais utilizadas, pela sua simplicidade e eficiência. Nesta dica veremos como criar uma estrutura em abas (tabs) de forma rápida e simples.

O primeiro passo é importar a folha de estilos e os scripts da jQuery e jQuery UI, de acordo com a Listagem 1.

Listagem 1: Importando CSS e JavaScript necessários


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Em seguida, é necessário organizar o código HTML de acordo como a biblioteca exige, com uma div representando o container principal e dentro dela uma lista com o cabeçalho das abas e várias divs representando as abas. Na Listagem 2 temos um exemplo desse modelo.

Listagem 2: Código HTML das abas


<div id="tabs">
	<ul>
		<li><a href="#aba-1">Aba 1</a></li>
		<li><a href="#aba-2">Aba 2</a></li>
		<li><a href="#aba-3">Aba 3</a></li>
	</ul>
	<div id="aba-1">
		<p>Conteudo da aba 1.</p>
	</div>
	<div id="aba-2">
		<p>Conteudo da aba 2.</p>
	</div>
	<div id="aba-3">
		<p>Conteudo da aba 3.</p>
	</div>
</div>

Por fim, é preciso selecionar a div container usando jQuery e chamar, a partir dela, a função tabs(), como mostra a Listagem 3.

Listagem 3: Criando as abas


<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

O resultado deve ser semelhante ao que ilustra a Figura 1.

jQuery Tabs em funcionamento

Figura 1: jQuery Tabs em funcionamento

Como podemos ver, temos uma interface leve, elegante e eficiente, criada de forma bastante simples. Para obter maiores detalhes, visite documentação original: http://jqueryui.com/tabs/.

Veja este exemplo em funcionamento clicando aqui.

Até a próxima.