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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
javascript标准库(js的标准内置对象)总结
May 26 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
详解php实现页面静态化原理
2017/06/21 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python离线安装外部依赖包的实现
2020/02/13 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python requests库的使用
2021/01/06 Python
python re模块常见用法例举
2021/03/01 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
《改造我们的学习》心得体会
2014/11/07 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年教师国培感言
2015/08/01 职场文书
班主任寄语2016
2015/12/04 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书