jquery页面无刷新切换皮肤并保存
效果体验:http://runjs.cn/detail/hijgcghe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<link href="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/skin_0.css" rel='stylesheet' type='text/css' id="cssfile">
<script id="jquery_180" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/cookie.js"></script>
<style>
.head{width:400px;}
a{
display:inline-block;
width:20px;
height:20px;
cursor:pointer;
} a.skin_0{
background:red;
}
a.skin_1{
background:green;
}
a.skin_2{
background:orange;
}
a.skin_3{
background:#;
}
.content{
width:500px;
height:500px;
margin-top:20px;
}
</style> </head>
<body>
<div style="margin-bottom:20px;">
选择颜色,改变下面div的颜色,刷新依旧存在——————cookie的强大
</div>
<div class="head">
<a class="skin_0" id="skin_0" class="selected"></a>
<a class="skin_1" id="skin_1"></a>
<a class="skin_2" id="skin_2"></a>
<a class="skin_3" id="skin_3"></a>
</div>
<div class="content"> </div>
</body>
<script type="text/javascript">
function changeColor(skinName){
$("#"+skinName).addClass('selected').siblings().removeClass('selected');
$("#cssfile").attr('href','http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/'+skinName+'.css');
$.cookie('mySkin',skinName,{path:'/',expires:});
} $(function(){
var $a = $(".head a");
$a.click(function(){
var skinName= this.id;
changeColor(skinName);
})
var cookieSkin = $.cookie('mySkin');
if(cookieSkin){
changeColor(cookieSkin);
} })
</script>
</html>
这儿技术点就是应用jquery插件cookie.js, $.cookie('mySkin',skinName,{path:'/',expires:10});这句话中,第一个参数是:cookie的名称,第二个参数是:cookie的值,第三个就是路径和保存时间。
而后面$.cookie('mySkin')是取将名称为mySkin的cookie值取出来。
而这个cookie.js的应用:
- $.cookie('the_cookie'); // 获得cookie
- $.cookie('the_cookie', 'the_value'); // 设置cookie
- $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
- $.cookie('the_cookie', '', { expires: -1 }); // 删除
- $.cookie('the_cookie', null); // 删除 cookie
- $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等
不过虽说插件好用,但是不免有时候也应该去研究研究原生的js的cookie代码。(一般来说,cookie是用来保存值用的。故而有时候需要统计页面访问次数,或者说“在一段时间里(比如5分钟),同一个人无论刷新了这个页面多少次都好,都只能算一次”)。
jquery页面无刷新切换皮肤并保存的更多相关文章
- jQuery实现无刷新切换主题皮肤功能
主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- 页面无刷新Upload File
页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
- HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新
AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...
- Asp.net页面无刷新请求实现
Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...
- 浅谈页面无刷新技术ajax
现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...
随机推荐
- poj 3518 Corporate Identity 后缀数组->多字符串最长相同连续子串
题目链接 题意:输入N(2 <= N <= 4000)个长度不超过200的字符串,输出字典序最小的最长公共连续子串; 思路:将所有的字符串中间加上分隔符,注:分隔符只需要和输入的字符不同, ...
- oracle闪回表详解
--- 说明闪回数据库 --- 使用闪回表将表内容还原到过去的特定时间点 --- 从删除表中进行恢复 --- 使用闪回查询查看截止到任一时间点的数据库内容 --- 使用闪回版本查询查看某一行在一段时间 ...
- 【dapper】.net平台下的框架
http://www.cnblogs.com/yipu/archive/2012/11/21/2780199.html Method Duration Remarks Hand coded (usin ...
- SVN 迁移
前段时间公司的SVN服务器做升级,需要做SVN迁移,百度谷歌了解了大概,在测试环境试了一下,没什么问题,然后改在正式环境做,迁移成功.之前用的是1.6,我看了下官网有1.8,征得同意后就直接升级加迁移 ...
- c#无标题窗体点击任务栏图标正常最小化或还原
FormBorderStyle等于System.Windows.Forms.FormBorderStyle.None的窗体,点击任务栏图标的时候,是不能象标准窗体那样最小化或还原的. protecte ...
- 3.5 spring-replaced-method 子元素的使用与解析
1.replaced-method 子元素 方法替换: 可以在运行时用新的方法替换现有的方法,与之前的 look-up不同的是replace-method 不但可以动态地替换返回的实体bean,而且可 ...
- [转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...
- string.Equals 比较2个字符串是否相同忽略大小写
bool res = string.Equals(str1, str2, StringComparison.CurrentCultureIgnoreCase)
- The 9th Zhejiang Provincial Collegiate Programming Contest->Problem :K-Yet Another Story of Rock-pap
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3610 题意:一对恋人受到fff团惩罚,需要比剪刀石头布,谁输谁死,出一样都 ...
- 下一代Jquery模板-----JsRender
在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...