jQuery.cookie.js插件实现换肤功能


本文摘自PHP中文网,作者小云云,侵删。

本文主要介绍jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧。

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

先来了解下cookie.js如何使用。

先导入:


1

2

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

然后就可以使用了。


1

2

3

4

5

$.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); //删除一个cookie

附上代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

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

实现的效果和上一篇文章的功能一样,而且使用了cookie.js之后,代码少了,而且更容易理解了。

相关推荐:

vue换肤功能实例教程

jQuery基于cookie实现换肤功能实例

Javascript结合css实现网页换肤功能_javascript技巧

以上就是jQuery.cookie.js插件实现换肤功能的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

你必须知道的10个chrome开发工具和技巧

javascript数组排序方法是什么

代码详解vue中key的作用示例

javascript中数组克隆的方法介绍(附代码)

javascript中的栈、队列操作

教你一招网课作业如何复制粘贴

java和javascript啥关系

关于html5中标签video播放的新解析

javascript怎么开启

介绍javascript 内存管理+如何处理4个常见的内存泄漏

更多相关阅读请进入《jQuery.cookie.js》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...