jquery页面无刷新切换皮肤并保存

效果体验:http://runjs.cn/detail/hijgcghe

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<link href="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/skin_0.css" rel='stylesheet' type='text/css' id="cssfile">
<script id="jquery_180" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/cookie.js"></script>
<style>
.head{width:400px;}
a{
display:inline-block;
width:20px;
height:20px;
cursor:pointer;
} a.skin_0{
background:red;
}
a.skin_1{
background:green;
}
a.skin_2{
background:orange;
}
a.skin_3{
background:#;
}
.content{
width:500px;
height:500px;
margin-top:20px;
}
</style> </head>
<body>
<div style="margin-bottom:20px;">
选择颜色,改变下面div的颜色,刷新依旧存在——————cookie的强大
</div>
<div class="head">
<a class="skin_0" id="skin_0" class="selected"></a>
<a class="skin_1" id="skin_1"></a>
<a class="skin_2" id="skin_2"></a>
<a class="skin_3" id="skin_3"></a>
</div>
<div class="content"> </div>
</body>
<script type="text/javascript">
function changeColor(skinName){
$("#"+skinName).addClass('selected').siblings().removeClass('selected');
$("#cssfile").attr('href','http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/'+skinName+'.css');
$.cookie('mySkin',skinName,{path:'/',expires:});
} $(function(){
var $a = $(".head a");
$a.click(function(){
var skinName= this.id;
changeColor(skinName);
})
var cookieSkin = $.cookie('mySkin');
if(cookieSkin){
changeColor(cookieSkin);
} })
</script>
</html>

这儿技术点就是应用jquery插件cookie.js, $.cookie('mySkin',skinName,{path:'/',expires:10});这句话中,第一个参数是:cookie的名称,第二个参数是:cookie的值,第三个就是路径和保存时间。

而后面$.cookie('mySkin')是取将名称为mySkin的cookie值取出来。

而这个cookie.js的应用:

  • $.cookie('the_cookie'); // 获得cookie
  • $.cookie('the_cookie', 'the_value'); // 设置cookie
  • $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
  • $.cookie('the_cookie', '', { expires: -1 }); // 删除
  • $.cookie('the_cookie', null); // 删除 cookie
  • $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

不过虽说插件好用,但是不免有时候也应该去研究研究原生的js的cookie代码。(一般来说,cookie是用来保存值用的。故而有时候需要统计页面访问次数,或者说“在一段时间里(比如5分钟),同一个人无论刷新了这个页面多少次都好,都只能算一次”)。

上一篇:>/dev/null 2>&1和2>&1 >/dev/null区别


下一篇:uva 816 - Abbott's Revenge(有点困难bfs迷宫称号)