注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@从前有个T

weibo.com/sysutt

 
 
 

日志

 
 
 
 

借助jquery cookie插件实现页面的夜间模式切换  

2014-01-03 16:41:35|  分类: 网络相关 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
展示效果:http://opinion.nfdaily.cn/content/2014-01/03/content_89021356.htm

前段时间做网站改版时,准备在网站上需要加入一个夜间模式的按钮,方便用户在夜晚阅读时不用面对过亮的屏幕。查阅了一些资料以后,发现要实现这个功能并不难,需要做以下准备:
1、jQuery cookie插件,可以去这里下载https://github.com/carhartl/jquery-cookie,一段很简单的代码,用来实现在用户端加入cookie的功能
2、CSS样式表,可以把白天和黑夜的样式都写入到同一个css里面,也可以把它们分开来写,我这个例子里面是把它们分开来写的,两个css,一个day.css,一个night.css

有了这几样东西,就可以开工了,具体做法如下:
一、在页面中把两个css文件都引用进去,给它们定义一个title,并其中一个加上disabled,让它不被浏览器加载,例如下面这样
<link title="day" rel="stylesheet" type="text/css" href="day.css" />
<link title="night" rel="stylesheet" type="text/css" href="night.css" disabled />

二、引用jQuery cookie插件
三、在html中加入控制夜间模式的按钮,给它们分别加上ID,例如下面这样
<div id="day" class="night_mode">关闭夜间模式<img class="mode_btn" src="images/night_mode_off_btn.png"/></div>
<div id="night" class="night_mode">打开夜间模式<img class="mode_btn" src="images/night_mode_on_btn.png"/></div>

四、加入控制夜间模式的js代码:
$(function() {
    var cookie_style = $.cookie("mystyle"); //给cookie加一个标识符
    if (cookie_style == null) {  //如果cookie为空,就显示白天的样式
        $("link[title='day']").removeAttr("disabled");
    } else if (cookie_style == "day") { //如果cookie为day,就显示白天的样式
        $("link[title='day']").removeAttr("disabled");
        $("link[title='night']").attr("disabled", "disabled");
    } else { //如果cookie为night,就显示夜间的样式
        $("link[title='night']").removeAttr("disabled");
        $("link[title='day']").attr("disabled", "disabled");
    }
//当用户点击id为night的按钮时的操作
    $("#night").click(function() { 
        var style = $("#night").attr("id"); //把night的值赋予给style
        $("link[title='" + style + "']").removeAttr("disabled");  //显示title为night的css
        $("link[title='day']").attr("disabled", "disabled"); //隐藏title为day的css
        $.cookie("mystyle", style, {  //设置cookie的有效期是10天
            expires:10
        });
    });
//当用户点击id为day的按钮时的操作
    $("#day").click(function() {
        var style = $("#day").attr("id"); //把day的值赋予给style
        $("link[title='" + style + "']").removeAttr("disabled"); //显示title为day的css
        $("link[title='night']").attr("disabled", "disabled"); //隐藏title为night的css
        $.cookie("mystyle", style, {  //设置cookie的有效期是10天
            expires:10
        });
    });
});

这样就可以做到通过jquery动态添加样式,同时即使用户关闭了页面,再次访问时仍然可以保留之前设定的样式了。
  评论这张
 
阅读(345)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018