Simples assim
Css
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>
<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>
Qualquer coisa, postem que eu tiro dúvidas.
Até a próxima.
Imagenote com jquery
Jun 18th
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.
More >
Comentários recentes