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

Categoria javaScript, jQuery | 18/04/2010 | Autor - Adriano Meira

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!

Isso pode ser interresante para você:

Tweet