Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Trocando CSS e gravando em cookies com jQuery (Stylesheet Switcher)

Olá pessoal um dia desses precisava gravar uma mudança de um elemento e que mesmo atualizando o navegador ou entrando lá depois isso ficasse de acordo com a última alteração, logo me surgiu a intenção de gravar isso num banco mas ai pensei e se outro usuário remover esta condição não daria certo.

Então pensei em cookies e achei algo bem bacana que compartilho com vocês, com um pouco de jQuery e este plugin conseguimos gravar num cookie uma condição, checa-la e aplica-la.

Em exemplo prático seria o seguinte imagine que deseja que tenha três tipos de estilo um normal (defult) outro com com de fundo clara e outro com letras brancas e fundo escuro, para facilitar a leitura para certos usuários que tenham dificuldade visual. Logo nada mais justo que dar a ele uma forma de escolher como o site melhor adequará a sua necessidade.

Veja aqui um exemplo funcionando.

Então vamos botar a mão na massa é muito simples precisamos do jQuery de praxe e de um plugin de cookies que você pode baixa-lo aqui ou visitar o site e conhecer melhor.

Primeiramente vamos criar três estilos diferentes, daí vai do seu gosto eu criei estes aqui com seus respectivos nomes apenas trocando a cor de fundo veja:

Nome: style1.css

body{ background-color:#FFF; }

Nome: style2.css

body{ background-color:#F90; }

nome: style3.css

body{ background-color: #DDD; }

Bom agora com os estilo prontos vamos ao HTML, chame um estilo defult no html como por exemplo eu estou usando o estilo 1, aproveite para chamar também o jQuery e o plugin de cookie:

<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>

Agora vamos montar os links, aqui vou fazer o seguinte ao clicar no link dentro de um li pega o valor do seu “REL” e aplica na função, fica assim então:

<ul id="nav">
    <li><a href="#" rel="style1.css">CSS Original</a></li>
    <li><a href="#" rel="style2.css">Fundo Claro</a></li>
    <li><a href="#" rel="style3.css">Fundo Escuro</a></li>
</ul>

Beleza então vamos agora voltar ao cabeçalho e colocar os códigos de javascript e jQuery para chamar e gravar o cookie, mas antes de mais nada uma rápida explicação sobre o plugin, ele pode gerar um novo cookie com o nome que quiser e o valor desejado, por exemplo, vamos criar um cookie chamado “css” e seu valor será o nome do arquivo por exemplo “style2.css”, também neste plugin você pode decidir quanto tempo este cookie será valido por exemplo um ano, dois meses, um dia… daí vai da sua aplicação, por exemplo um sistema de login que o cookie vale por um dia, mas tome muito cuidado com isso pois se alguém conseguir pega-lo poderá usa-lo para o “mau”, use com cuidado!

Seguindo nosso exemplo, usaremos por um ano 365 dias, o plugin trabalha com dias ok? Antes de carregar o jQuery vamos checar se foi setado o cookie com nome “CSS”:

if($.cookie("css")) {
   $("link").attr("href",$.cookie("css"));
}

Note que aqui verificamos se o cookie “css” foi setado se sim atribuímos ao “link”  que  equivale ao body (veja mais na documentação do jQuery), aqui também abro um leque de possibilidades para você, você pode usar também isso em algum elemento com uma “DIV” que será exibido ou não, um menu em árvore que esteja aberto ou não, checar se um usuário está logoado ou não… daí como disse vai da sua aplicação.

Em seguida vamos a ação de clicar e mudar as coisas, vamos abrir a função “ready” do jQuery e colocar a função veja:

$(document).ready(function() {
    $("#nav li a").click(function() {
     $("link").attr("href",$(this).attr('rel'));
     $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
     });
});

Aqui estou falando o seguinte para o navegador, ao clicar em um link dentro da “DIV” com id=”nav” faça:

  1. Atribua ao “link” (body) o atributo href (link) o valor do “REL” deste (this)  link, logo ele ficaria assim: href=”style3.css” se clicar no link correspondente.
  2. Em seguida crie o cookie “CSS”, que seu valor será o “REL” deste (this) link e vai expirar em 365 dias.
  3. E me retorne falso para que nada mais mude a não ser as instruções passadas acima.

Prontinho agora para testar na sua máquina ela tem que ter configuração de um servidor para rodar cookie, se não jogue em algum servidor,  aqui você pode conferir um exemplo rodando e aqui pode baixar este exemplo que está  rodando.

Créditos deste artigo vão para CSS newbie. Valeu pessoal!

Bom espero ter ajudado algumas pessoas que me perguntaram sobre isso! Até mais grande abraço!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (11)

  • Leandro disse:

    Muito bom cara! Sabia nada de cookie (e ainda naum sei), mas vejo o quanto ele é util e essa sua explicação desse plugin ajudou muito!
    Valew!!!

  • Joao disse:

    Muito obrigado!
    Estava muito a fim de fazer ‘troca de fundo’ do meu site nas mudanças que farei nele e não conseguia…graças ao seu tutorial eu consegui. E olha que eu ja tinha visto a página original!
    Abraços!

  • Márcio disse:

    Gostei!
    Ajuda bastante!

  • Nestor disse:

    Super legal esse script claro, limpo e objetivo, o que eu estava precisando para resolver o detalhe de troca de estilo do site infantil que estou criando … Show, obrigadão!

  • Alex disse:

    Muito obrigado, amigo. Vai servir perfeitamente para meu projeto. Só não “lhe pago um café” pois estou sem cartão de crédito no momento. Abraço!

  • Adriano Meira disse:

    Obrigado Alex, quando quiser ajudar ficarei muito feliz!

  • leon disse:

    Olá Adriano, boa tarde.
    Gostei muito deste post, realmente deu certo, só tive um probleminha:
    ao trocar de página ele volta a formatação original, sabe pq?
    Abraços e fique com Deus.

    Att.

  • Adriano Meira disse:

    Olá Leon

    Cara de uma conferida se instanciou certinho as classes e se seu servidor permite a gravação de cookies

  • Thomaz Gomes disse:

    Adriano,
    Muito obrigado pelo seu artigo. Está me ajudando muito em um projeto. Porém queria saber se há a possibilidade de trocar um CSS específico, pois em um projeto com várias folhas ao clicar no link o script muda todas elas.

  • Dimas disse:

    gOSTARIA DE USAR UM BOTÃO COM TOGGLE

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...