Heim >Web-Frontend >HTML-Tutorial >Das jQuery.cookie.js-Plug-in implementiert die Skin-Änderungsfunktion
Das jQuery.cookie.js-Plug-in implementiert die Skin-Änderungsfunktion
- 小云云Original
- 2018-01-29 10:29:331119Durchsuche
In diesem Artikel wird hauptsächlich jQuery in Kombination mit dem Plug-In jQuery.cookie.js zur Realisierung der Skin-Änderungsfunktion vorgestellt. Er analysiert die allgemeinen Funktionen des Plug-Ins jQuery.cookie.js und die damit verbundenen Bedienfähigkeiten zur Realisierung Hautverändernde Funktionen in Form von Beispielen. Freunde in Not können sich auf Folgendes beziehen und hoffen, dass es allen helfen kann.
Das letzte Mal habe ich mit Ihnen geteilt, wie Sie die Skin-Änderungsfunktion implementieren, aber der Skriptcode scheint etwas lang zu sein, daher habe ich vor, dieses Mal das Cookie.js-Plug-In zu verwenden, um die Skin-Änderung zu implementieren Funktion. Okay, fangen wir an.
jQuery.cookie.js herunterladen: https://github.com/carhartl/jquery-cookie/
Erstens lernen wir, wie man cookie.js verwendet.
Erster Import:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script><!--jQuery版本最好是1.3.1以上--> <script type="text/javascript" src="js/jquery.cookie.js"></script>
Dann können Sie es verwenden.
$.cookie('the_cookie'); //读取Cookie值
$.cookie('the_cookie', 'the_value'); //设置cookie的值
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'example.com', secure: true});//新建一个cookie,"expires"是有效天数,"path"是保存路径,"domain"是创建 cookie的网页所拥有的域名,"secure"是cookie的传输是否使用安全协议（HTTPS）
$.cookie('the_cookie', 'the_value'); //新建cookie
$.cookie('the_cookie', null); //删除一个cookieAnbei ist der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie的使用</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<style>
.huanFu{
float:right;
}
.huanFu ul li{
width:30px;height:30px;
list-style:none;
margin:0 5px;
float:left;
cursor:pointer;
border:1px solid #000;
}
.fu1{background-color:#F00;}
.fu2{background-color:#0F0;}
.fu3{background-color:#00F;}
.fu4{background-color:#FF0;}
.huanFu ul li.select{border:3px solid #000;margin-top:-3px;}
</style>
<script>
$(function(){
$(".huanFu ul li").on("click",function(){
var piFu=$(this).attr("fuName");//取得选择皮肤的fuName值
$("body").attr("class",piFu);//给body有class加上fuName值，也就是添加对应的背景色
$(this).addClass("select").siblings().removeClass("select");//选择中的li才有大黑框选中，其余去除大黑框选中效果
$.cookie("MySkin",piFu,{path:'/',expires:10});//创建cookie,并保存到本地cookie中
});
var cookieSkin=$.cookie("MySkin");//取出本地cookie中的保存的值
if(cookieSkin){
$(".huanFu ul li[fuName='"+cookieSkin+"']").addClass("select").siblings().removeClass("select");//选择中的li才有大黑框选中，其余去除大黑框选中效果
$("body").attr("class",cookieSkin);//给body有class加上fuName值，也就是添加对应的背景色
}else{
$("body").attr("class","fu1");//如果本地cookie无记录，就默认用红色做背景
}
});
</script>
</head>
<body class="fu1">
<p class="huanFu">
<ul>
<li class="fu1" fuName="fu1"></li>
<li class="fu2" fuName="fu2"></li>
<li class="fu3" fuName="fu3"></li>
<li class="fu4" fuName="fu4"></li>
</ul>
</p>
</body>
</html>Der erzielte Effekt und die Funktion des vorherigen Artikel Das Gleiche gilt, und nach der Verwendung von cookie.js ist der Code kleiner und leichter zu verstehen.
Verwandte Empfehlungen:
Beispiel-Tutorial für eine Vue-Skin-verändernde Funktion
jQuery-Implementierung eines Beispiels für eine Skin-verändernde Funktion basierend auf Cookies
Das obige ist der detaillierte Inhalt vonDas jQuery.cookie.js-Plug-in implementiert die Skin-Änderungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!