Fala pessoal, tudo bom? Nesse artigo pretendo mostrar como é simples manipular os elementos da página com JQuery. Vamos ver como mostrar e ocultar informações, deixando armazenada a preferência do usuário, utilizando cookies.
Veja o exemplo em funcionamento
1. Estrutura (index.html)
Primeiramente vamos montar a estrutura da página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mostrar/Ocultar informações com JQuery + Cookie</title>
</head>
<body>
<h2>Mostrar/Ocultar informações com JQuery + Cookie</h2>
<div class="box" id="ingles">
<img src="image/show_hide.png" align="Mostrar/Ocultar" />
<h1>Inglês</h1>
<p class="conteudo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="box" id="alemao">
<img src="image/show_hide.png" align="Mostrar/Ocultar" />
<h1>Alemão</h1>
<p class="conteudo">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum</p>
</div>
<div class="box" id="espanhol">
<img src="image/show_hide.png" align="Mostrar/Ocultar" />
<h1>Espanhol</h1>
<p class="conteudo">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>
<div class="box" id="portugues">
<img src="image/show_hide.png" align="Mostrar/Ocultar" />
<h1>Português</h1>
<p class="conteudo">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</body>
</html>
Nesse exemplo usei conteúdos estáticos, porém você poderia selecioná-los de um banco de dados, desde que respeite a hierarquia dos elementos.
2. JQuery
Antes de continuar, baixe a ultima versão biblioteca do jQuery. Também será necessário baixar o plugin para manipulação de cookies.
Agora vamos incluir os scripts em nossa estrutura, entre as tags <head></head> de preferência:
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>
Pronto, agora sim podemos criar nosso script. Primeiramente iremos criar o evento para ocultar e mostrar as caixas:
<script type="text/javascript">
// Quando carregar a página
$(function($) {
// Quando clicado em uma imagem das caixas
$('div.box img').click(function() {
// Recuperando ID da DIV da qual a imagem se encontra
var id = $(this).parent('div').attr('id');
// Armazenando elemento que será oculto
var conteudo = $('#'+id+' p.conteudo');
// Escondendo ou exibindo o conteúdo do box
conteudo.slideToggle(function() {
// Caso o conteúdo do box esteja visível
if (conteudo.css('display') == 'block')
// Cria um cookie que recebe o ID do elemento como nome e o valor 1
$.cookie(id, 1, {expires: 365});
// Caso esteja oculto
else
// Cria um cookie que recebe o ID do elemento como nome e o valor 0
$.cookie(id, 0, {expires: 365});
});
});
});
</script>
Vamos a análise:
- Linha 6: quando clicado em uma imagem (img) que está contida em uma div com classe igual a box (div.box)
- Linha 8: armazenamos em uma variável o ID da DIV onde se encontra a imagem, para isso utilizamos o parent() que seleciona o elemento pai e depois utilizamos attr() que recupera o valor da propriedade ID.
- Linha 10: selecionamos as informações que estão no parágrafo com classe igual a conteudo (p.conteudo) que está dentro da box com ID recuperado anteriormente.
- Linha 12: escondemos ou exibimos (dependendo do estado do elemento) o conteúdo do box, através do método slideToggle(), quando terminado a animação é chamada uma função.
- Linha 14: verificamos se o box está visível, para isso utilizamos o método css() para recuperar o valor da propriedade display.
- Linha 16: se estiver visível, setamos um cookie, damos a ele o nome do ID da box e colocamos 1 como valor. O cookie irá expirar apenas em 365 dias.
- Linha 18, 19: caso o box esteja oculto, também setamos um cookie, porém com valor 0.
Bom, os cookie já estão sendo setados, porém quando o usuário atualizar a página, não há nenhum tipo de verificação para ocultar ou mostrar os elementos de acordo com a preferência do usuário, portanto vamos criar essa função, logo após a função anterior:
// Procurando e passando por cada box da página
$("body").find("div.box").each(function(){
// Recuperando ID
var id = $(this).attr('id');
// Armazenando elemento que será oculto
var conteudo = $('#'+id+' p.conteudo');
// Caso o cookie não tenha sido criado
if ($.cookie(id) == null)
// Ocultamos
conteudo.css("display", "none");
// Se um cookie foi criado e está com 1, ou seja, visível
else if ($.cookie(id) == 1)
// Exibimos
conteudo.css("display", "block");
// Se um cookie foi criado e está com 0, ou seja, oculto
else if ($.cookie(id) == 0)
// Ocultamos
conteudo.css("display", "none");
});
Análise:
- Linha 2: percorremos a página (body), através do each() buscando cada div com classe igual a box (div.box).
- Linha 4, 6: recuperamos e armazenamos o ID e o conteúdo do box.
- Linha 8, 10: se o cookie com o nome do ID do box estiver nulo (null), ou seja, ainda não foi setado, escondemos o elemento.
- Linha 12, 14: se o cookie com o nome do ID do box estiver com valor 1, ou seja, o usuário escolheu que ele ficasse visível, exibimos ele.
- Linha 16, 18: se o cookie com o nome do ID do box estiver com valor 0, ou seja, o usuário escolheu que ele ficasse oculto, ocultamos ele.
3. Conclusão
Podemos perceber que com JQuery é muito simples manipular qualquer elemento de nossa página e com o plugin de cookies também fica simples a manipulação de cookies.
Por hoje é isso pessoal, espero que vocês tenham entendido.
Abraços.
