jQuery实现无刷新切换主题皮肤功能

时间 2019-12-06

原文原文链接

主题皮肤切换功能在不少网站和系统中应用，用户能够根据此功能设置本身喜欢的主题颜色风格，加强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。javascript

实现该功能的原理就是经过点击定义的主题样式，改变页面当前引用的主题CSS文件，而且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户从新访问页面时，调用的就是上次设置好的主题样式。css

准备主题皮肤样式

首先，我准备了三个样式表CSS文件，分别是三种风格的主题皮肤，将其引入页面，放置在页面的<head>之间。java

<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文件。jquery

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，只管直接调用该插件就行。cookie

<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:30this

接着须要作的是页面载入时，读取主题cookie值，若是主题cookie存在则调用cookie值对应的主题样式CSS文件，而且设置当前主题按钮状态为选中状态，反之，则调用默认样式。代码以下：url

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，亦或者用户换用其余浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，并写入数据库，下次该用户登陆就能够直接读取主题，固然，该方法应用在有用户权限范围的系统，如后台管理系统，我的中心等。