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

查看演示DEMO：https://www.helloweba.net/demo/style-switch/

实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题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，只管直接调用该插件就行。关于该插件的使用，请阅读本站文章：使用jQuery操作Cookies

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

jQuery实现无刷新切换主题皮肤功能的更多相关文章

  1. Android 实现切换主题皮肤功能（类似于众多app中的 夜间模式，主题包等）

    首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: <resources> <!-- Base application theme. --& ...

  2. jquery页面无刷新切换皮肤并保存

    效果体验:http://runjs.cn/detail/hijgcghe <!DOCTYPE html> <html> <head> <meta http-e ...

  3. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  4. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  5. jQuery.pager无刷新分页

    刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...

  6. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  7. jQuery Ajax无刷新操作

    下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现. //后台实例代码 ashx文件(可替换为从数据库中读取) public void ProcessRequest(HttpCont ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. ionic动态切换主题皮肤

    本来想通过css自定义属性值: :root{ --red:red; } p{ color:var(--red); } div{ background:var(--red); } 在ionic2设置动态 ...

随机推荐

  1. 前端 HTML 标签里 特殊符号

    特殊符号 浏览器在显示的时候会移除源代码中多余的空格和空行. 所有连续的空格或空行都会被算作一个空格.需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格. <!DOCTYPE ...

  2. Python3学习之路~5.3 random模块

    random模块常用方法: import random # 随机数 print(random.random()) # 生成一个0到1的随机浮点数,0 <= n < 1.0 print(ra ...

  3. cxPivotGrid导出数据

    导出数据,需要在uses区域引用cxExportPivotGridLink 根据导出类型使用以下过程 procedure cxExportPivotGridToHTML procedure cxExp ...

  4. python的第三方库

    python的第三方库 https://www.lfd.uci.edu/~gohlke/pythonlibs/

  5. （转）EOSIO开发（四）- nodeos、keosd与cleos

    前一篇文章介绍了EOSIO中钱包.账户与账户权限的概念,这一篇文章继续学习EOSIO系统的主要组件,包括nodeos.keosd以及cleos. 本文执行的命令都是基于Docker环境,请先下载Doc ...

  6. spring boot+logback+JdbcTemplate打印sql日志

    项目中使用的JdbcTemplate直接在service中执行sql语句,配置如下: 使用IDEA创建的项目自带 main/resource 中自带logback.xml 配置文件,添加以下日志配置, ...

  7. Python 全栈开发三 python基础 条件与循环

    一. 条件语句 python条件语句是根据一条或多条语句的执行结果的真假(True Or False)来决定代码块的执行. 而执行内容可以多行,以缩进来区分表示同一范围. 1.Python判断条件真假 ...

  8. js不能拦截302

    302跳转是浏览器自动处理并跳转 You can't handle redirects with XHR callbacks because the browser takes care of the ...

  9. NodeJs--HTTP源码分析

    在github上按下按键t,就可以呼出仓库搜索的面板(在大型项目中方便检索文件),检索出http.js文件检索出来,通过ctrl+F来搜索某个方法. _http_outgoing 带下划线的是私有模块 ...

  10. C# 抽象类、抽象属性、抽象方法

    抽象类往往用来表征对问题领域进行分析.设计中得出的抽象概念,是对一系列看上去不同,但是本质上相同的具体概念的抽象. 下面我们以水果为例,首先定义抽象类Fruit,抽象类中有公共属性vendor,抽象属 ...