Anterior Próximo

Sistemas de abas com Jquery sem pluginpublicado em 15/10/2009

Muitas vezes precisamos fazer coisas teoricamente simples com jquery, mas que pela quantidade de plugins existentes acabamos optando por usar algo já existente.

É claro que re-inventar a roda é perda de tempo, mas na maioria das vezes o plugin que está disponível, oferece muito mais recursos do que os que sua aplicação realmente precisa e por este motivo você acaba incluindo um script de 50kb quando só necessitaria de apenas 5 linhas de código para escrever o necessário.

Segue então a minha solução para um menu com abas usando o core do jquery.

Inicialmente você precisará de um HTML semântico como este:

<div class="tabs">
<ul class="tab-menu">
<li><a href="#primeira">Primeira</a></li>
<li><a href="#segunda">Segunda</a></li>
<li><a href="#terceira">Terceira</a></li>
<br clear="all" />
</ul>

<div id="primeira">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet diam velit, non pulvinar tortor. Praesent rhoncus dui sit amet enim blandit a luctus lacus elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam consequat dolor ut libero bibendum eget auctor dolor tincidunt. Morbi at massa nunc, vitae lacinia lorem. In hac habitasse platea dictumst. Maecenas neque mauris, cursus et dignissim vel, placerat sed est. Quisque scelerisque elementum orci, imperdiet rhoncus lacus posuere in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mauris quis turpis hendrerit fringilla. Etiam gravida eros a ligula ullamcorper vitae porta orci fringilla. Nulla in ullamcorper nisl. Proin et dui ante. Nullam id rutrum nunc. Sed ornare, ligula sed mollis porta, nulla nulla rutrum magna, a mattis massa erat id tellus. In hac habitasse platea dictumst. Ut accumsan lacinia nulla, vitae iaculis massa dictum sed. Vivamus ultricies varius massa, sit amet malesuada arcu placerat sit amet. Suspendisse dolor tortor, tempor sed congue ut, condimentum at arcu. Vivamus elit eros, tincidunt ut sodales eget, ornare eleifend nulla.</p>
</div>

<div id="segunda">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet diam velit, non pulvinar tortor. Praesent rhoncus dui sit amet enim blandit a luctus lacus elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam consequat dolor ut libero bibendum eget auctor dolor tincidunt. Morbi at massa nunc, vitae lacinia lorem. In hac habitasse platea dictumst. Maecenas neque mauris, cursus et dignissim vel, placerat sed est. Quisque scelerisque elementum orci, imperdiet rhoncus lacus posuere in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mauris quis turpis hendrerit fringilla. Etiam gravida eros a ligula ullamcorper vitae porta orci fringilla. Nulla in ullamcorper nisl. Proin et dui ante. Nullam id rutrum nunc. Sed ornare, ligula sed mollis porta, nulla nulla rutrum magna, a mattis massa erat id tellus. In hac habitasse platea dictumst. Ut accumsan lacinia nulla, vitae iaculis massa dictum sed. Vivamus ultricies varius massa, sit amet malesuada arcu placerat sit amet. Suspendisse dolor tortor, tempor sed congue ut, condimentum at arcu. Vivamus elit eros, tincidunt ut sodales eget, ornare eleifend nulla.</p>
</div>

<div id="terceira">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet diam velit, non pulvinar tortor. Praesent rhoncus dui sit amet enim blandit a luctus lacus elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam consequat dolor ut libero bibendum eget auctor dolor tincidunt. Morbi at massa nunc, vitae lacinia lorem. In hac habitasse platea dictumst. Maecenas neque mauris, cursus et dignissim vel, placerat sed est. Quisque scelerisque elementum orci, imperdiet rhoncus lacus posuere in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mauris quis turpis hendrerit fringilla. Etiam gravida eros a ligula ullamcorper vitae porta orci fringilla. Nulla in ullamcorper nisl. Proin et dui ante. Nullam id rutrum nunc. Sed ornare, ligula sed mollis porta, nulla nulla rutrum magna, a mattis massa erat id tellus. In hac habitasse platea dictumst. Ut accumsan lacinia nulla, vitae iaculis massa dictum sed. Vivamus ultricies varius massa, sit amet malesuada arcu placerat sit amet. Suspendisse dolor tortor, tempor sed congue ut, condimentum at arcu. Vivamus elit eros, tincidunt ut sodales eget, ornare eleifend nulla.</p>
</div>
</div>

Caso visualize este HTML no browser agora, verá que apesar de não termos nenhum código javascript ainda, ao clicar em um link a tela é posicionada na de acordo com o box escolhido.

Isso acontece, pois nos refs dos links temos uma ancora um recurso do html que posiciona a tela em uma determinada parte previamente sinalizada.

Vamos agora criar o código que fará que o menu funcione como uma "aba",escondendo tudo e mostrando apenas os dados da aba selecionada.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// Ao iniciar, esconde todas as tabs menos a primeira
$("div.tabs > div").hide().filter(":first").show();
// Trata o evento dos cliques nos links
$("div.tabs ul.tab-menu a").click(function(){
// Esconde todas menos a tab clicada
$("div.tabs > div").hide().filter(this.hash).show();
});
});
</script>

Agora, ao executar você verá que tudo já funciona como o esperado, ao clicar em alguma tab apenas o dado referente a ela é mostrado.

Falta agora uma aparência para que o menu realmente se pareça com uma aba e não com um link comum. Teremos então que incluir um estilo CSS:

.tabs div { border:1px solid #ccc;  padding:15px;  }
.tabs ul.tab-menu      { list-style:none;  height:29px;}
.tabs ul.tab-menu li   { float:left; margin-right:2px; }
.tabs ul.tab-menu li a { padding:10px; background:#ccc; }
.tabs ul.tab-menu li a:hover,
.tabs ul.tab-menu li a.selected { background:#333; color:#fff; }

Ótimo, agora temos um menu com abas mas ainda falta um pequeno detalhe, quando clicamos em uma determinada aba, queremos que ela fique marcada com uma cor diferenciada das demais para que fique fácil descobrir qual aba está sendo exibida. Para isso Iremos incluir dinamicamente uma classe css que neste caso chamarei de "selected" na aba selecionada da seguinte forma.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// Ao iniciar, esconde todas as tabs menos a primeira
$("div.tabs > div").hide().filter(":first").show();
// Trata o evento dos cliques nos links
$("div.tabs ul.tab-menu a").click(function(){
// Esconde todas menos a tab clicada
$("div.tabs > div").hide().filter(this.hash).show();
// Remove todas as class "selected" botando apenas na tab selecionada
$("div.tabs ul.tab-menu a").removeClass("selected");
$(this).addClass("selected");
});
});
</script>

.tabs div { border:1px solid #ccc;  padding:15px;  }
.tabs ul.tab-menu      { list-style:none;  height:29px;}
.tabs ul.tab-menu li   { float:left; margin-right:2px; }
.tabs ul.tab-menu li a { padding:10px; background:#ccc; }
.tabs ul.tab-menu li a:hover,
.tabs ul.tab-menu li a.selected { background:#333; color:#fff; }

Espero que tenham gostado.

• Exemplo de funcionamento
• Download do código fonte

Tags:

• JQuery

retweet