您的位置：首页 > 其它

cookie记忆换肤功能实战Demo

2015-09-07 14:50 471 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery换肤+cookie记忆功能</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<link rel="stylesheet" href="../css/reset.css" media="screen" />
<link rel="stylesheet" href="../css/green.css" media="screen" name="skin" />

<script src="../jquery-1.10.2.min.js"></script>
<script src="../jquery.cookie.js"></script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="stylechange" class="clear">
<ul>
<li><a href="javascript:void(0)" class="green"></a></li>
<li><a href="javascript:void(0)" class="blue"></a></li>
</ul>
</div>
<ul id="nav">
<li><a href="index.html" class="current">测试</a></li>
<li><a href="#">关于</a></li>
</ul>
<div id="content">
<h2>WelCome!</h2>
<p>Hello，everyone.I will share some useful tips of jQuery here.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div id="footer">Powered By Dennis Ji.</div>
</div>
</body>
<script>
$(function(){

var favstyle = readCookie('style');//style是cookie的名字
console.log(favstyle);//../css/green.css上次定义的绿色或蓝色皮肤在这里得到了输出
if(favstyle){
$("link[name='skin']").attr({href:favstyle});
}
//绿色主题
$(".green").click(function(){
$("link[name='skin']").attr({href:"../css/green.css"});
createCookie('style',"../css/green.css",365);
});
//蓝色主题
$(".blue").click(function(){
$("link[name='skin']").attr({href:"../css/blue.css"});
createCookie('style',"../css/blue.css",365);
});

//下面是jQuery版本(注意：要写在$(function(){})里面)的的创建、读取、删除cookie
function createCookie(name,value,days){
var expires;
if (days) {
expires = days;
} else{
expires = "";
}
$.cookie(name,value,{expires:expires,path:'/'});
}
function readCookie(name){
var styles = $.cookie(name);//jQuery的cookie只用这样写就能读出cookie的值了
return styles;
}
function delCookie(name){
$.cookie(name,null)
}
//注：本地cookie的读取要用localhost才能读取，普通的无服务器的文件路径是读取不到的
});

</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航