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.
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.
