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

Bom galerinha chegamos à terceira semana de artigos sobre o mais famoso framework de JavaScript, o jQuery. Basicamente nas duas semanas anteriores falamos um pouco sobre como indexar o framework pelo Google e sobre efeitos e eventos. Se você não viu os últimos artigos sugiro que vocês de dêem uma olhada antes de ler este.

Últimos Artigos:

1. Aprendendo a importar o Framework do Google
2. Início de Eventos e Efeitos [FadeTo e Toggle]

Depois de aprendermos um pouco sobre Efeitos e Eventos, temos que começar a aprender Manipuladores, que irão modificar por exemplo classes[class] ou adicionar um texto a um elemento da sua página. Basicamente eles são usados para fazer as modificações, e dar alguma interação à página.

Vamos ao código…

Primeiramente iremos olhar para a parte do XHTML, que iremos colocar dentro do corpo da página[body] o seguinte código:

<div id="abrir" class="botao">Fazer a modifica&ccedil;&atilde;o</div>

<div id="texto" class="texto">
Div com Modificação
</div>

O código acima é igual ao do artigo anterior, só modifiquei o texto um pouco. Mas as caixas[divs] não foram modificadas.

Agora iremos colocar o código CSS no cabeçalho da nossa página[head], iremos modificar apenas uma linha do que usamos na última aula.

<style type="text/css" media="screen" title="Estilo criado para a página">
	div.texto { width:250px;background: #e1e1e1; border:1px solid #333;padding:10px; margin-top:10px;}
	div.modificar { background: #3e3e3e; color:#eee; border:1px solid #000; }
	div.botao { text-align:center; line-height:30px; width:150px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }
	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>

A linha que adicionamos é o estilo da classe que será adicionada[div.modificar] à caixa de texto[div.texto].

Bom agora iremos a parte que nos interessa o código jQuery que irá fazer com que seja adicionada uma classe [class] para a caixa de texto[div.texto].

Então iremos adicionar no nosso cabeçalho o seguinte código:

<script type="text/javascript">
	$(document).ready(function() {
		$("#abrir").toggle(
			function() {$("#texto").fadeTo(1000, 0.0001, function () {
                   		        $("#texto").addClass("modificar");
					$("#texto").fadeTo(1000, 1.0);
			})},
			function() {$("#texto").fadeTo(1000, 0.0001, function () {
                       			$("#texto").removeClass("modificar");
					$("#texto").fadeTo(1000, 1.0);
			})}
		);
	});
</script>

Bom como já foi mostrado no artigo 2 da série, a Evento toggle irá fazer com que seja alternado entre a primeira e a segunda função[function() {};] toda vez que o usuário clicar na caixa[#abrir].

Então quando clicarmos pela primeira vez no botão[#abrir] será feito um fade para que a caixa se torne quase transparente[fadeTo(1000, 0.0001, function (){!1!], ai entra o modificador addClass que irá fazer com que seja adicionada a classe que definimos[modificar] para a caixa [#texto]. Após feito isso um efeito[fadeTo] é usado para tornar a caixa opaca outra vez.

Ao clicar pela segunda vez teremos um fade[fadeTo] para que a caixa se torne transparente e depois é removido[removeClass] a classe modificar da caixa, da mesma forma que na função anterior é feito um fade[fadeTo] para a caixa se tornar opaca outra vez.

IPCs:

1. Bom essa segunda que é adicionada é simplesmente para que o que vem a seguir só acontecer quando a a fadeTo tiver sido terminada.

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.

É basicamente isso que é construído o código, existem outras maneiras de usar os modificadores, vocês podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa.

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