suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery kombiniert mit dem Plug-in jQuery.cookie.js, um ein Beispiel für eine Skin-Änderungsfunktion zu implementieren

jQuery kombiniert mit dem Plug-in jQuery.cookie.js, um ein Beispiel für eine Skin-Änderungsfunktion zu implementieren

韦小宝
韦小宝Original
2018-01-12 09:56:061773Durchsuche

Dieser Artikel stellt hauptsächlich jQuery in Kombination mit dem jQuery.cookie.js-Plug-in vor, um die Skin-Änderungsfunktion zu implementieren. Er analysiert die allgemeinen Funktionen des jQuery.cookie.js-Plug-ins und die Implementierung Informationen zur Skin-Change-Funktion in Form von Beispielen finden Freunde in Not in diesem Artikel

Dieser Artikel beschreibt das Beispiel von jQuery in Kombination mit dem jQuery.cookie.js-Plug-in zur Implementierung Hautverändernde Funktion. Ich teile es Ihnen als Referenz wie folgt mit:

Das letzte Mal habe ich Ihnen mitgeteilt, wie Sie die Skin-Änderungsfunktion implementieren, aber der Skriptcode scheint etwas lang zu sein, daher habe ich vor, dieses Mal zu verwenden cookie.js-Plugin zur Implementierung der Skin-Änderungsfunktion Okay, fangen wir an.

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(&#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

Angehängter Code: 

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

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein! !

Verwandte Empfehlungen:

Probleme bei der Verwendung von Jquery.cookie.js

Verwendung von Jquery.cookie.js zum Anzeigen des Webbrowsings Der Verlaufsdatensatz ist sehr nützlich

jquery.cookie.js-Methode zur Implementierung der Benutzeranmeldung und zum Speichern der Passwortfunktion


Das obige ist der detaillierte Inhalt vonjQuery kombiniert mit dem Plug-in jQuery.cookie.js, um ein Beispiel für eine Skin-Änderungsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery Cookie JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel-Tutorial für das jQuery-Return-Positioning-Plug-inNächster Artikel：Beispiel-Tutorial für das jQuery-Return-Positioning-Plug-in

In Verbindung stehende Artikel

Mehr sehen