jQuery之换肤与cookie插件
有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格。
这个功能可以用jQuery来实现。外加cookie插件。有了cookie,就可以长时间的保存选择后的背景样式,而不至于每次刷新界面都会转入默认的画面。
效果如下:
代码之div+css研读:

<body>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul> <div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div> <div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div> </body>


#div_side_0,#div_side_1
{
float:left;
width:120px;
height:450px;
}
#skin
{
margin:10px;
padding:5px;
width:210px;
padding-right:0px;
list-style:none;
border: 1px solid #CCCCCC;
overflow:hidden;//
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
}
#skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;/*text-indent是用来设定文本块中第一行的缩进*/
overflow:hidden;
display:block; /*
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
*/
cursor:pointer;
background-image:url(theme.gif);
}
#skin_0{
background-position:0px 0px;
}
#skin_1{
background-position:15px 0px;
}
#skin_2{
background-position:35px 0px;
}
#skin_3{
background-position:55px 0px;
}
#skin_4{
background-position:75px 0px;
}
#skin_5{
background-position:95px 0px;
}
#skin_0.selected{
background-position:0px 15px !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}

在html部分,通过一个ul、li来进行导航的布局。两个div进行内容的布局。在ul中设置了margin、padding、width、list-style、border、overflow等值。
在li中设置了float、width、height等。这里的背景图片用的很巧妙。
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。巧妙的利用了position+位置的组合。
当选中时,x位置不变,y位置向下移动15px,这样就会出现打钩的那个画面。这种处理非常之巧妙。
用一个图片,解决了很多问题。
下面进行jQuery代码的研读
版本一:

<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //当前<li>元素选中,this是js对象,$(this)是jQuery对象。
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+this.id+".css"); //设置不同皮肤
})
})
//]]>
</script>

这里是简单的实现了效果,更换按钮,更换皮肤。
但是并没有实现cookie。
这段代码主要实现两个动作,一个是变换按钮的选中状态,一个是改变相应的皮肤css。通过js对象this获得标签为this.id的jQuey对象,这种处理也很巧妙。
另一个,将css文件名命名与属性id相结合,也很巧妙。
修改cssfile的属性值href为新的css。
版本二:

<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });
});
var cookie_skin = $.cookie( "MyCssSkin");//将MyCssSkin这个cookie值this.id赋给变量cookie_skinif (cookie_skin) {
$("#"+cookie_skin).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ cookie_skin +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });
}
})
//]]>
</script>

这里面多了一个动作,就是设置了cookie。
然后通过cookie值是否存在来做出相应的动作,如果cookie值存在,就直接将皮肤设为cookie值的值。
这里用到的是jQuery的cookie插件。
jQuery操作cookie的插件,大概的使用方法如下
$.cookie('the_cookie'); //读取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //删除一个cookie
不过这段代码不好的地方,就是有大量的重复代码,可以模块化,函数化。这也是代码优化的一种。
版本三:

<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
switchSkin( this.id );
});
var cookie_skin = $.cookie( "MyCssSkin");//优化了代码,将功能模块化了
if (cookie_skin) {
switchSkin( cookie_skin );
}
});
function switchSkin(skinName){
$("#"+skinName).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>

用到就调用函数,参数变化即可。
jQuery之换肤与cookie插件的更多相关文章
- 第一百八十七节,jQuery,知问前端--cookie 插件,注册成功后生成cookie,显示登录状态
jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...
- duilib入门之贴图描述、类html文本描述、动态换肤、Dll插件、资源打包
转载自duilib入门文档 贴图描述: Duilib的表现力丰富很大程度上得益于贴图描述的简单强大.Duilib的贴图描述分为简单模式和复杂模式两种. 简单模式使用文件名做为贴图描述内容,在这种方式下 ...
- jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的
比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...
- Android主题换肤 无缝切换
2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...
- 网页换肤,模块换肤,jQuery的Cookie插件使用(转)
具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...
- jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) ...
- cookie 换肤
jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the M ...
- cookie记忆换肤功能实战Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Android App插件式换肤实现方案
背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...
随机推荐
- Android快捷键
Android快捷键ALT+/ :在布局文件中,提示输入的内容Shift + Ctrl + / :注释Shift + Ctrl + \ :解除注释
- Effective C++笔记:构造/析构/赋值运算
条款05:了解C++默默编写并调用哪些函数 默认构造函数.拷贝构造函数.拷贝赋值函数.析构函数构成了一个类的脊梁,只有良好的处理这些函数的定义才能保证类的设计良好性. 当我们没有人为的定义上面的几个函 ...
- Codeforces Gym 100203G G - Good elements 标记暴力
G - Good elementsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...
- 在CentOS 6上搭建私有的Docker Registry
在CentOS 6上搭建私有的Docker Registry v2Registry概念 :Registry是一个无状态的, 高可扩展的服务器端应用程序, 用于存储和分发Docker Image. 依赖 ...
- JavaScript案例二:在末尾添加节点
简单实现通过JavaScript来增加HTML节点 <!DOCTYPE html> <html> <head> <title>JavaScript在末尾 ...
- 【word xml】将word转化为xml格式后,如何在xml中卫word添加分页符
1.首先在xml中找到我们需要添加分页符的位置 例如:我需要在这个第一部分上面添加一个分页符 2.找到这个[第一部分]这个位置之后,开始往上找,找到对应的位置 3.在</w:pPr>下方添 ...
- 记录sqoop同步失败问题解决过程,过程真的是很崎岖。(1月6日解决)
记录sqoop同步失败问题解决过程,过程真的是很崎岖.事发原因:最近突然出现sqoop export to mysql时频繁出错.看了下日志是卡在某条数据过不去了,看异常.看sqoop生成的mr并未发 ...
- SGU326 Perspective(指派问题)
题目简单吧,如果知道题目要干嘛的话. 每个比赛指定A赢或者B赢使它们赢得次数不超过1赢得次数.建立一个二分图模型,X部比赛,Y部队伍,用最大流求解,如果最后最大流等于比赛场数就有解. 然而我还是掉坑里 ...
- BZOJ3571 : [Hnoi2014]画框
题目是要求最小乘积最小权匹配, 将一种方案看做一个二维点(x,y),x=a值的和,y=b值的和,所有方案中只有在下凸壳上的点才有可能成为最优解 首先要求出两端的方案l,r两个点 l就是a值的和最小的方 ...
- 洛谷 P1008 三连击 Label:水
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 输入输出格式 输入格式: 木有输入 输出格式: 若干行,每行3个 ...