jQuery无刷新切换主题皮肤实例讲解


Posted in Javascript onOctober 21, 2015

主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。

jQuery无刷新切换主题皮肤实例讲解

实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式。
准备主题皮肤样式
首先,我准备了三个样式表CSS文件,分别是三种风格的主题皮肤,将其引入页面,放置在页面的<head>之间。

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> 
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> 
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" />

注意我给每个<link>添加了title属性,是由用处的,另外我禁用了第2个和第3个CSS文件,就是默认起作用的是第1个CSS文件。
XHTML

<ul id="styles"> 
 <li id="default">经典</li> 
 <li id="blue">淡蓝</li> 
 <li id="brown">棕色</li> 
</ul>

三种主题风格用于点击切换,注意我分别给每个li加了id属性。
CSS

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; 
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} 
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); 
background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color:#162934;} 
ul#styles li#blue{background-color:#90c5e7} 
ul#styles li#brown{background-color:#601f00}

用CSS渲染XHTML,其中ul#styles li.cur是指当前主题选中下的样式,我用一个小勾表示当前选中的主题。
jQeury
首先我们要引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能,你不用去写复杂的原生的javascript,只管直接调用该插件就行。关于该插件的使用,请阅读本站文章:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script>

接下来,当用户点击切换选择主题时,要发生以下动作:获取选择的主题(id),查看引用的CSS文件,如果发现其title属性值正好与当前选中的主题id值相等,则应用该主题CSS文件,同时将其他引用的CSS文件禁用,并且将当前选中的主题写入cookie中,设置cookie过期时间,最后将当前选中的主题按钮(li)设置为当前选中状态。具体看下面的代码:

$("#styles li").click(function(){ 
 var style = $(this).attr("id"); 
 $("link[title='"+style+"']").removeAttr("disabled"); 
 $("link[title!='"+style+"']").attr("disabled","disabled"); 
 $.cookie("mystyle",style,{expires:30}); 
 $(this).addClass("cur").siblings().removeClass("cur"); 
});

注意,在本例中我将选中的样式保存在用户cookie中,cookie名称为”mystyle“,值为当前选中的主题值,过去时间为30天,即:expires:30
接着需要做的是页面载入时,读取主题cookie值,如果主题cookie存在则调用cookie值对应的主题样式CSS文件,并且设置当前主题按钮状态为选中状态,反之,则调用默认样式。代码如下:

var cookie_style = $.cookie("mystyle"); 
if(cookie_style==null){ 
 $("link[title='default']").removeAttr("disabled"); 
 $("#styles li#default").addClass("cur"); 
}else{ 
 $("link[title='"+cookie_style+"']").removeAttr("disabled"); 
 $("#styles li[id='"+cookie_style+"']").addClass("cur"); 
 $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); 
}

将以上两段代码加入到$(function(){})中,工作到此完成。
值得一提的是,本文应用的cookie记录用户所选择设置的主题皮肤样式,但是当cookie到期或者用户清除了浏览器的COOKIE,亦或者用户换用其他浏览器浏览时,当前设置的主题就会失效。为了让用户永久保存选择的主题样式,必须将所选的主题与用户信息对应,并写入数据库,下次该用户登录就可以直接读取主题,当然,该方法应用在有用户权限范围的系统,如后台管理系统,个人中心等。

以上就是本文的全部内容,内容很详细,方便读者理解阅读,希望大家能有所收获吧!

Javascript 相关文章推荐
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 #Javascript
13个PHP函数超实用
Oct 21 #Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 #Javascript
JavaScript对象数组的排序处理方法
Oct 21 #Javascript
Javascript刷新窗口方法小结
Oct 21 #Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 #Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 #Javascript
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
分享php多功能图片处理类
2016/05/15 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python在不同层级目录import模块的方法
2016/01/31 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python图片的横坐标汉字实例
2019/12/04 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
美国钻石商店:Zales
2016/11/20 全球购物
回门宴答谢词
2014/01/13 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
亮化工程实施方案
2014/03/17 职场文书
房屋认购协议书
2015/01/29 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
新生儿未入户证明
2015/06/23 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书