Home >Web Front-end >HTML Tutorial >jQuery.cookie.js plug-in implements skin changing function

jQuery.cookie.js plug-in implements skin changing function

小云云Original: 2018-01-29 10:29:331123browse

This article mainly introduces jQuery combined with the jQuery.cookie.js plug-in to implement the skin-changing function. It analyzes the common functions of the jQuery.cookie.js plug-in and the related operating techniques for implementing the skin-changing function in the form of examples. Friends in need can refer to the following , hope it can help everyone.

Last time I shared with you how to implement the skin-changing function, but the script code seems a bit long, so this time I plan to use the cookie.js plug-in to implement the skin-changing function. Okay, let's get started.

jQuery.cookie.js download:https://github.com/carhartl/jquery-cookie/

First let’s learn how to use cookie.js.

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

Then you can use it.

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

Attached 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:&#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>

The effect achieved is the same as the function of the previous article, and the use After using cookie.js, the code is less and easier to understand.

Related recommendations:

vue skin-changing function example tutorial

jQuery implements skin-changing function example based on cookie

Javascript combined with css to implement web page skinning function_javascript skills

The above is the detailed content of jQuery.cookie.js plug-in implements skin changing function. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css Cookie JS github https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements mouse wheel control page image switchingNext article：JavaScript implements mouse wheel control page image switching

See more

jQuery.cookie.js plug-in implements skin changing function

Related articles