recherche

Maison >interface Web >js tutoriel >jQuery combiné avec le plug-in jQuery.cookie.js pour implémenter un exemple de fonction de changement de skin

jQuery combiné avec le plug-in jQuery.cookie.js pour implémenter un exemple de fonction de changement de skin

韦小宝
韦小宝original
2018-01-12 09:56:061808parcourir

Cet article présente principalement jQuery combiné avec le plug-in jQuery.cookie.js pour implémenter la fonction de changement de skin. Il analyse les fonctions communes du plug-in jQuery.cookie.js et leur implémentation. de la fonction de changement de peau sous forme d'exemples. Pour les compétences opérationnelles, les amis dans le besoin peuvent se référer à cet article

Cet article décrit l'exemple de jQuery combiné avec le plug-in jQuery.cookie.js pour implémenter le fonction de changement de peau. Je le partage avec vous pour votre référence, comme suit :

La dernière fois, j'ai partagé avec vous comment implémenter la fonction de changement de skin, mais le code du script semble un peu long, donc cette fois je prévois d'utiliser le Plug-in cookie.js pour implémenter la fonction de changement de skin. Bon, commençons.

Apprenons d’abord à utiliser cookie.js.

Première importation : 

<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>

Ensuite, vous pouvez l'utiliser. 

$.cookie(&#39;the_cookie&#39;); //读取Cookie值
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;); //设置cookie的值
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;, {expires: 7, path: &#39;/&#39;, domain: &#39;example.com&#39;, secure: true});//新建一个cookie,"expires"是有效天数,"path"是保存路径,"domain"是创建 cookie的网页所拥有的域名,"secure"是cookie的传输是否使用安全协议（HTTPS）
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;); //新建cookie
$.cookie(&#39;the_cookie&#39;, null); //删除一个cookie

Code ci-joint : 

<!DOCTYPE html>
<html>
<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:&#39;/&#39;,expires:10});//创建cookie,并保存到本地cookie中
  });
  var cookieSkin=$.cookie("MySkin");//取出本地cookie中的保存的值
  if(cookieSkin){
    $(".huanFu ul li[fuName=&#39;"+cookieSkin+"&#39;]").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>

Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à l'étude de chacun ! !

Recommandations associées :

Problèmes rencontrés lors de l'utilisation de Jquery.cookie.js

Utilisation de Jquery.cookie.js pour afficher la navigation Web l'enregistrement de l'historique est super utile

Méthode jquery.cookie.js pour implémenter la fonction de connexion de l'utilisateur et d'enregistrement du mot de passe


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery Cookie JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de tutoriel de plug-in de positionnement de retour jQueryArticle suivant：Exemple de tutoriel de plug-in de positionnement de retour jQuery

Articles Liés

Voir plus