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中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
js函数般调用正则
Apr 08 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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经典的给图片加水印程序
2006/12/06 PHP
PHP 函数语法介绍一
2009/06/14 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python字符串反转的四种方法详解
2019/12/02 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
软件配置管理有什么好处
2015/04/15 面试题
培训主管岗位职责
2014/02/01 职场文书
市场营销工作计划书
2014/05/06 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年工人工作总结
2014/11/25 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js