Mostrar e Ocultar informações com JQuery + Cookie

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.

Por Programação Pular para comentários
Mostrar e Ocultar informações com JQuery + Cookie

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.

1. Estrutura (index.html)

Primeiramente vamos montar a estrutura da página:





Mostrar/Ocultar informações com JQuery   Cookie


Mostrar/Ocultar informações com JQuery Cookie

Inglês

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.

Alemão

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

Espanhol

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.

Português

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.

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 > de preferência:


Pronto, agora sim podemos criar nosso script. Primeiramente iremos criar o evento para ocultar e mostrar as caixas:

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.

Download dos arquivos

Por hoje é isso pessoal, espero que vocês tenham entendido, qualquer coisa façam perguntas abaixo. Abraços.

Leia também: Formulário de contato em php. Acompanhe as últimas notícias de tecnologia aqui no Oficina da Net. Sempre trazendo conteúdos novos e produtos interessantes.

Compartilhe com seus amigos:
Comentários:
Carregar comentários