Guanabara.info: Podcast, Tecnologia, iPhone, Notícias, Tutoriais, Vídeo Aulas, Programação

Mais uma vez estamos aqui com um artigo de jQuery, e agora com o quinto artigo da série, espero que estejam gostando e entendendo, porque poucas pessoas estão colocando dúvidas, o que é muito bom, sinal que está bem explicado.

Agora vamos começar a desenvolver algo que realmente pode ser aplicado de maneira ativa em um site. É um sistema bem simples de abas. Mas é claro, se você não viu os artigos anteriores eu acho que é importante antes de começar a ler este. Pois coisas explicadas anteriormente não serão explanadas, abaixo vai uma lista com os últimos artigos:

1. Aprendendo a importar o Framework do Google
2. Início de Eventos e Efeitos [FadeTo e Toggle]
3. Manipuladores modificando uma Classe
4. Manipulação textual

Vamos ao código…

Como nos outros eu não pretendo comentar muito o CSS e o HTML pois não são o foco destes artigos, então caso deseje entender pode dar uma olhada nas aulas de HTML do Guanabara.info e para CSS sugiro o Maujor, muito bom.

O código CSS que deve entrar no seu cabeçalho[head] deve ser o seguinte:

<style type="text/css" media="screen" title="Estilo criado para a página">
	* { margin: 0; padding: 0; }
	ol { background: #F3F3F3; padding: 10px; border-left: 5px solid #CCCCCC; margin-bottom: 30px; }

	div#abas { width:600px;font-size: 90%;margin: 20px auto; }
	div#abas ul { float: right; background: #ededed; width: 600px; padding-top: 4px; }
	div#abas li { margin-left: 8px; list-style: none; }
	* html #abas li { display: inline; /* Corrige um erro do IE */ }
	div#abas li, #abas li a { float: left; }
	div#abas ul li a { text-decoration: none; padding: 8px; color: #666; font-weight: bold; }
	div#abas ul li.ativo { background: #e1e1e1; }
	div#abas ul li.ativo a { color: #303030; }
	div#abas div {	background: #e1e1e1; clear: both;padding: 20px; min-height: 100px; }
	div#abas div h3 { text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; }
	div#abas div p { line-height: 150%; }

	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>

Ele ficou um pouquinho maior comparado ao do artigo anterior, e dentro do corpo da página[body] entra o seguinte HTML:

	<div id="abas">
		<ul>
			<li><a href="#aba-1">Aba Um</a></li>
			<li><a href="#aba-2">Aba Dois</a></li>
			<li><a href="#aba-3">Aba Três</a></li>
			<li><a href="#aba-4">Aba Quatro</a></li>
		</ul>
		<div id="aba-1">
			<p>Esta é a primeira aba</p>
		</div>
		<div id="aba-2">
			<p>Esta é a segunda aba</p>
		</div>
		<div id="aba-3">
			<p>Esta é a terceira aba</p>
		</div>
		<div id="aba-4">
			<p>Esta é a quarta aba</p>
		</div>
	</div>

Este também ficou um pouco maior, mas agora vamos a parte que realmente nos interessa, o jQuery usado é o seguinte:

<script type="text/javascript">
$(document).ready(function(){
	$('#abas div').hide();
	$('#abas div:first').show();
	$('#abas ul li:first').addClass('ativo');
	$('#abas ul li a').click(function(){
		$('#abas ul li').removeClass('ativo');
		$(this).parent().addClass('ativo');
		var abaAtual= $(this).attr('href');
		$('#abas div').hide();
		$(abaAtual).show();
		return false;
	});
});
</script>

Bom o código começa especificando que todos os elementos que casem com #abas div devem sumir, e logo abaixo manda o apenas o primeiro aparecer[#abas div:first]. Até ai fizemos sumir todas as caixas e apenas 1 aparecer.

Agora faremos o primeiro elemento dos botões[#abas ul li:first] ficar com a classe ativo.

Abaixo iremos criar uma função que ao clique[click] começa retirando da primeira aba a classe ativo, e abaixo iremos fazer com que o elemento que foi clicado[this] tenha atribuído a ele a classe ativo.

Bom agora vem a parte que ira fazer a mágica deste código, onde uma variável[abaAtual] receba o valor que será definido pelo parâmetro href do elemento a do botão das abas, que no nosso caso deve combinar com o parâmetro id do elemento div, repare que #aba-1 do a combina com #aba-1 do div.

Então abaixo vem um código que ira esconder novamente os elementos #abas div e logo depois temos o código que deve mostrar ao usuário o conteúdo da aba em que ele clicou.

Logicamente quando for clicado no elemento a com o parâmetro href igual a #aba-1 o elemento div de parâmetro id igual a #aba-1 será mostrado, não importando a ordem em que tais aparecem.

Só para lembrar que no final aquele return false; é para que nenhuma variavel ali usada seja levada para fora desta função.

Bom então em resumo fizemos com esse código, um pequeno sistema de abas.

Após feito tudo isso vocês podem salvar o arquivo editado e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

• Evento[click]
• Variaveis[var]
• Atributos[addClass]
• Atributos[removeClass]
• Busca[parent]

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.