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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
js实现文字滚动效果
Mar 03 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
VUE长按事件需求详解
Oct 18 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
session 的生命周期是多长
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php三元运算符知识汇总
2015/07/02 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python版微信红包分配算法
2015/05/04 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python实现随机加减法生成器
2020/02/24 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
大学校园活动策划书
2014/02/04 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
老师的检讨书
2014/02/23 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
劲霸男装广告词
2014/03/21 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
pandas数值排序的实现实例
2021/07/25 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js