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

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

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

准备主题皮肤样式

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

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

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

XHTML

  1. <ul id="styles"> 
  2.     <li id="default">经典</li> 
  3.     <li id="blue">淡蓝</li> 
  4.     <li id="brown">棕色</li> 
  5. </ul> 

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

CSS

  1. ul#styles{margin-top:10px
  2. ul#styles li{float:leftwidth:50pxheight:40pxline-height:40pxpadding:2px;  
  3. margin-left:10pxborder:1px solid #ffftext-align:centercolor:#fffcursor:pointer
  4. ul#styles li.cur{border:1px solid #369background-image:url(images/selected.gif);  
  5. background-repeat:no-repeatbackground-position:4px 32px
  6. ul#styles li#default{background-color:#162934;} 
  7. ul#styles li#blue{background-color:#90c5e7
  8. ul#styles li#brown{background-color:#601f00

用CSS渲染XHTML,其中ul#styles li.cur是指当前主题选中下的样式,我用一个小勾表示当前选中的主题。

jQeury

首先我们要引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能,你不用去写复杂的原生的javascript,只管直接调用该插件就行。关于该插件的使用,请阅读本站文章:

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

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

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

注意,在本例中我将选中的样式保存在用户cookie中,cookie名称为”mystyle“,值为当前选中的主题值,过去时间为30天,即:expires:30

接着需要做的是页面载入时,读取主题cookie值,如果主题cookie存在则调用cookie值对应的主题样式CSS文件,并且设置当前主题按钮状态为选中状态,反之,则调用默认样式。代码如下:

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

将以上两段代码加入到$(function(){})中,工作到此完成,去看看效果吧。

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

转载请注明:代码家园 » jQuery实现无刷新切换主题皮肤功能

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)