Posts tagged Css

Cookie com jQuery

Mar 18th

Olá, hoje vou mostrar como é simples trabalhar com cookie usando a jQuery.

Primeiro, vamos baixar o framework ja na nova versão 1.4 e o jquery.cookie.

Pronto, ja tendo os plugins, vamos por a mão na massa.
Abaixo no código, as linhas do js estão comentadas de acordo com a sua ação,
não tem segredo, não é copiar e colar, prestar atenção nos comentários e alem de tudo, entender.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

            <script type="text/javascript" src="http://stilbuero.de/jquery/cookie/jquery.cookie.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                    //Usamos a função find para buscar o "a" dentro da div "link" na ação do click

                    $("#link").find("a").click(function(){

                        //Declaramos que idBg vai ter o mesmo valor do ID do link clicado

                        var idBg = $(this).attr("id");

                        //Setamos o cookie com o nome de bg_fundo e passamos o valor do idBg, expirando em 7 dias.

                        $.cookie("bg_fundo", "" + idBg + "", { expires: 7 });

                        //Adicionamos uma classe ao body ou alguma div que você queira, passando o nome

                        //do cookie que no nosso caso é o bg_fundo.

                        $("body").addClass($.cookie("bg_fundo"));

                    });

                    //Ao abrir a página ou recarregar, ele traz o cookie adicionando a classe bg_fundo.

                    $("body").addClass($.cookie("bg_fundo"));

                });

            </script>

            <style type="text/css" media="screen">

                /*Definimos a cor do bg em cada classe.*/

                .bg1 {background:#000000;}

                .bg2 {background:#00ff00;}

                .bg3 {background:#ff0000;}

            </style>

    </head>

    <body>

        <div id="link">

            <ul>

                <li><a href="javascript:void(0);" id="bg1">Background preto</a></li>

                <li><a href="javascript:void(0);" id="bg2">Background verde</a></li>

                <li><a href="javascript:void(0);" id="bg3">Background vermelho</a></li>

            </ul>

        </div>

    </body>

<html>