Cookie com jQuery

flaviomuniz — Thu, 18 Mar 2010 14:28:41 +0000

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">

                $(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>

Background preto

Background verde

Background vermelho

Veja o exemplo

Qualquer coisa, postem que eu tiro dúvidas.

Até a próxima.

Imagenote com jquery

flaviomuniz — Fri, 19 Jun 2009 01:33:36 +0000

Vou mostrar como é facil fazer aquelas anotações em imagens como as do flickr e orkut.
Depois de feito, basta vc usar a criatividade de como usar.
Bom, vamos la,
Antes de começarmos com os códigos, baixe o marcador.js, jquery_002.js, jquery.js e o imgnotes.css.
Depois de baixar os arquivos acima, vamos começar.

    <script type="text/javascript">

            notes = [

                {

                    //Você pode colocar o seu loop nessa linha, assim a imagem pode ficar com várias marcações.

                    "x1":"10","y1":"10","height":"110","width":"100","note":"Hello World!"

                }

            ];

        $(window).load(function () {

            $('#imagem').marcarImagem();

            //$('#imagem').imgAreaSelect({ onSelectChange: showaddnote })

            //Esconde o formulario - Hide the form

            $('#cancelnote').click(function(){

                $('#imagem').imgAreaSelect({ hide: true });

                $('#noteform').fadeOut();

            });

            //Mostra o formulario de marcação, você pode especificar o tamanho e posição dele.

            //x1: 120, y1: 90, x2: 280, y2: 210

            $('#addnotelink').click(function(){

                $('#imagem').imgAreaSelect({ onSelectChange: showaddnote, x1: 120, y1: 90, x2: 280, y2: 210 });

                return false;

            });

        });

    function showaddnote (img, area) {

        imgOffset = $(img).offset();

        //Usando os tamanhos que você passou na funcao $(window).load(function (), ele posiciona o formulario de marcação.

        form_left  = parseInt(imgOffset.left) + parseInt(area.x1);

        form_top   = parseInt(imgOffset.top) + parseInt(area.y1) + parseInt(area.height)+5;

        $('#noteform').css({ left: form_left + 'px', top: form_top + 'px'});

        //Mostra o formulario - Show the form

        $('#noteform').show();

        $('#noteform').css("z-index", 10000);

        $('#NoteX1').val(area.x1);

        $('#NoteY1').val(area.y1);

        $('#NoteHeight').val(area.height);

        $('#NoteWidth').val(area.width);

    }

    script>

Coloque o código acima dentro dos padrões W3C.

<br />

    <br />

    <html xmlns="http://www.w3.org/1999/xhtml"><br />

    <head><br />

        <title>Padrões W3C</title><br />

        <br />

    </head><br />

        <body></p>

<p>        </body><br />

    </html><br />

Agora vamos ao html.

</p>

<p style="text-align: center;">

    <img id="imagem" src="tern.jpg" alt="" />

</p>

<p>

O código acima é onde a imagem à ser marcada vai ficar.

</p>

<div id="noteform">

<form id="NoteAddForm" action="?acao=AddPost" method="post">

        <fieldset><br />

            <legend>Descricao</legend><br />

                <input id="NoteX1" name="x1" type="hidden" /><br />

                <input id="NoteY1" name="y1" type="hidden" /><br />

                <input id="NoteHeight" name="height" type="hidden" /><br />

                <input id="NoteWidth" name="width" type="hidden" /><br />

                <textarea id="NoteNote" name="note"></textarea><br />

        </fieldset></p>

<div class="submit">

        <input type="submit" value="Marcar" /><br />

        <input id="cancelnote" type="button" value="Cancelar" />

    </div>

</form>

</div>

<p>

Acima temos o formulário para o envio da mensagem.

Agora é você usar a criatividade para rodar em sua aplicação, o principal esta ai.
Veja o exemplo na prática.
Demo

Until next time.

FlavioMuniz » Blog » Css

Cookie com jQuery

Imagenote com jquery