您的位置：首页 > Web前端 > JQuery

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

2014-08-28 16:05 489 查看

效果体验：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:#666;
}
.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:10});
}

$(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分钟），同一个人无论刷新了这个页面多少次都好，都只能算一次”）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航