jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下:
/*** Cookie plugin** Copyright (c) 2006 Klaus Hartl (stilbuero.de)* Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html**//*** Create a cookie with the given name and value and other optional parameters.** @example $.cookie('the_cookie', 'the_value');* @desc Set the value of a cookie.* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });* @desc Create a cookie with all available options.* @example $.cookie('the_cookie', 'the_value');* @desc Create a session cookie.* @example $.cookie('the_cookie', null);* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain* used when the cookie was set.** @param String name The name of the cookie.* @param String value The value of the cookie.* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.* If set to null or omitted, the cookie will be a session cookie and will not be retained* when the the browser exits.* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will* require a secure protocol (like HTTPS).* @type undefined** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*//*** Get the value of a cookie with the given name.** @example $.cookie('the_cookie');* @desc Get the value of a cookie.** @param String name The name of the cookie.* @return The value of the cookie.* @type String** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*/jQuery.cookie = function(name, value, options) {if (typeof value != 'undefined') { // name and value given, set cookieoptions = options || {};if (value === null) {value = '';options.expires = -1;}var expires = '';if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {var date;if (typeof options.expires == 'number') {date = new Date();date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));} else {date = options.expires;}expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE }// CAUTION: Needed to parenthesize options.path and options.domain// in the following expressions, otherwise they evaluate to undefined// in the packed version for some reason...var path = options.path ? '; path=' + (options.path) : '';var domain = options.domain ? '; domain=' + (options.domain) : '';var secure = options.secure ? '; secure' : '';document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');} else { // only name given, get cookievar cookieValue = null;if (document.cookie && document.cookie != '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) == (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;} };
Cookie插件的操作
创建一个会话cookie:
$.cookie(‘cookieName’,'cookieValue’);
注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。
创建一个持久cookie:
$.cookie(‘cookieName’,'cookieValue’,{expires:7});
注:当指明时间时,故称为持久cookie,并且有效时间为天。
创建一个持久并带有效路径的cookie:
$.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/'});
注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。
创建一个持久并带有效路径和域名的cookie:
$.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/',domain: ‘chuhoo.com’,secure: false,raw:false});
注:domain:创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭这个功能,请设置为true。
获取cookie:
$.cookie(‘cookieName’); //如果存在则返回cookieValue,否则返回null。
删除cookie:
$.cookie(‘cookieName’,null);
或者这样也能删除: $.cookie('cookieName', '', { expires: -1, path: '/' }); // 删除 cookie
注:如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName’,null,{path:’/'});
来演示一个换肤的粟子:
代码之div+css
<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> <!--头部开始--> <div id="header"><a id="logo" href="#">Jane Shopping</a><ul id="skin"><li id="skin_0" title="蓝色" class="selected">蓝色</li><li id="skin_1" title="紫色">紫色</li><li id="skin_2" title="红色">红色</li><li id="skin_3" title="天蓝色">天蓝色</li><li id="skin_4" title="橙色">橙色</li><li id="skin_5" title="淡绿色">淡绿色</li></ul></div> <!--头部结束-->
/*切换皮肤样式*/ #skin { float:right; margin:10px; padding:4px; width:120px; list-style:none; border: 1px solid #CCCCCC; background:#FFF; } #skin li { float:left; margin-right:4px; width:15px; height:15px; text-indent:-9999px; overflow:hidden; display:block; cursor:pointer; background-image:url(../images/theme.gif); } #skin_0 { background-position:0px 0px; } #skin_1 { background-position:15px 0px; } #skin_2 { background-position:35px 0px; } #skin_3 { background-position:55px 0px; } #skin_4 { background-position:75px 0px; } #skin_5 { background-position:95px 0px; } #skin_0.selected { background-position:0px 15px; } #skin_1.selected { background-position:15px 15px; } #skin_2.selected { background-position:35px 15px; } #skin_3.selected { background-position:55px 15px; } #skin_4.selected { background-position:75px 15px; } #skin_5.selected { background-position:95px 15px; }
不同皮肤的css文件都放在styles/skins 文件夹下,命名如下:
代码之jQuery代码
版本一:
$(function(){var $li =$("#skin li");$li.click(function(){$("#"+this.id).addClass("selected") //当前<li>元素选中.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ (this.id) +".css"); //设置不同皮肤$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });});var cookie_skin = $.cookie( "MyCssSkin");//将MyCssSkin这个cookie值this.id赋给变量cookie_skinif (cookie_skin) {$("#"+cookie_skin).addClass("selected") //当前<li>元素选中.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ cookie_skin +".css"); //设置不同皮肤$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });}})
版本一不好的地方,就是有大量的重复代码,可以模块化,函数化,来看版本二:
//网站换肤 $(function(){var $li =$("#skin li");$li.click(function(){switchSkin( this.id );});var cookie_skin = $.cookie("MyCssSkin");if (cookie_skin) {switchSkin( cookie_skin );} });function switchSkin(skinName){$("#"+skinName).addClass("selected") //当前<li>元素选中.siblings().removeClass("selected"); //去掉其他同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ skinName +".css"); //设置不同皮肤$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); }
下面代码也是换肤的例子
html:
<script>//加载皮肤文件loadCss(_skinId,'Main.css'); </script><div style="right:10px; top: 5px; position: absolute; height: 21px; text-align:right"><a>皮肤:</a><a href="#" οnclick="loadSkin('1')">藤蔓绿</a> <a href="#" οnclick="loadSkin('2')">经典蓝</a> <a href="#" οnclick="loadSkin('3')">甜蜜橙</a> <a href="#" οnclick="loadSkin('4')">淡雅灰</a></div>
皮肤路径 :
js代码:
var _skinId = getCookie("_skinId") ? getCookie("_skinId"):"1";function loadSkin(skinId) {writeCookie("_skinId",skinId);top.window.location.reload(); }function $(id) {return document.getElementById(id); }function loadCss(skinId,cssName) {var head = document.getElementsByTagName('head').item(0);css = document.createElement('link');css.href = "Skin/Skin" + skinId + "/"+cssName;css.rel = 'stylesheet';css.type = 'text/css';css.id = 'loadCss';head.appendChild(css); }function loadJs(file) {var scriptTag = document.getElementById('loadScript');var head = document.getElementsByTagName('head').item(0);if(scriptTag) head.removeChild(scriptTag);script = document.createElement('script');script.src = "../js/mi_"+file+".js";script.type = 'text/javascript';script.id = 'loadScript';head.appendChild(script); }function setCookie(sKey, sValue, sDomain, sPath, sExpires, blSecure) {var sCookieStr = sKey + "=" + sValue + ";";if (sDomain) sCookieStr += " DOMAIN=" + sDomain + ";";if (sPath) sCookieStr += " PATH=" + sPath + ";";if (sExpires) sCookieStr += " EXPIRES=" + sExpires + ";";if (blSecure) sCookieStr += " SECURE";document.cookie = sCookieStr; }function writeCookie(key,value) {var sExpires=new Date();sExpires.setTime(sExpires.getTime()+24*60*60*1000*365);setCookie(key,value,"","",sExpires.toGMTString(),""); if(getCookie(key) == null){alert("您的浏览器安全设置过高,不支持Cookie,请重新设置浏览器的。");} }function getCookie(sKey) {var sCookie = document.cookie;if( !sCookie ) return null;var sTag = sKey + "=";var iBegin = sCookie.indexOf(sTag);if (iBegin < 0) return null;iBegin += sTag.length;var iEnd = sCookie.indexOf(";", iBegin);if (iEnd < 0) iEnd = sCookie.length;return sCookie.substring(iBegin, iEnd); }function delCookie(sKey) {var tNow = new Date();setCookie(sKey, "", null, null, tNow.toGMTString(), null); }
转载于:https://www.cnblogs.com/shy1766IT/p/5189604.html
jquery.cookie中的操作之与换肤相关推荐
- jquery.cookie中的操作
jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件. 创建一个会话cookie: $.cookie('cookieName','cookieValue' ...
- vue中利用scss实现整体换肤和字体大小设置
一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...
- scss提取 vue_vue 中使用sass实现主体换肤
有如下代码要实现换肤功能 {{ msg }} Red Green Blue name:'app', data() {return{ msg:'Dynamic Themes', theme:'red'} ...
- Web API 排他操作案例 —— 百度换肤
学习来源:https://www.bilibili.com/video/BV1HJ41147DG 思路 给一组元素注册事件 给4个小图片利用循环注册点击事件 当我们点击了这个图片,让我们页面背 ...
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- Android换肤逻辑
换肤逻辑 来归纳一下换肤的相关原理吧!有这么一种说法,对于一个成熟的控件,其实核心逻辑代码仅仅占总代码的10%,并且处理了90%的需求,然后剩下的90%的代码,是用于解决剩下的10%的需求的.本文当然 ...
- opengl源码 实现无缝切换图片过场_手把手讲解 Android hook技术实现一键换肤
前言 产品大佬又提需求啦,要求app里面的图表要实现白天黑夜模式的切换,以满足不同光线下都能保证足够的图表清晰度. 怎么办?可能解决的办法很多,你可以给图表view增加一个toggle方法,参数Str ...
- android 换肤(1)——插件式无缝换肤(解析鸿洋大神的换肤流程)
对于app换肤,这是一个常见而又常用的功能.虽然我做的项目中还没涉及到换肤,但是还是想研究下. 于是,下载了鸿洋大神的换肤demo来研究. 先看效果图:(尊重鸿洋大神的代码,效果图上原创) 鸿洋大神的 ...
- python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
最新文章
- 算法证明:女生遇到心动的男人一定要追!
- java 并发编程 aqs_Java并发编程之AQS
- python序列类型唯一的映射类型_python2.x学习笔记(8)-映射和集合类型
- lee最短路算法_Lee算法的解释:迷宫运行并找到最短路径
- [js] 写一个格式化时间的方法
- LeetCode MySQL 1495. Friendly Movies Streamed Last Month
- 计算机中汉字用什么表示什么,在计算机中汉字是用几个字节表示
- matlab 轴gui,MatlabüGUI学习笔记(4)——公共对象属性的轴,MatlabGUI,四,常用,之,Axes...
- 拓端tecdat|R语言使用灰色关联分析(Grey Relation Analysis,GRA)中国经济社会发展指标
- 文章三 国家助学贷款-还款
- Aliyun平台Nginx+Mysql+Redis部署easyboot
- 【Linux修炼】开篇
- MOOS-ivp 实验十四(1)编写行为使命
- matlab产生均匀白噪声,各种分布白噪声的产生matlab.pdf
- Type-C保温杯取电方案
- 勾股定理计算机语言,勾股定理
- 组织能力建设的三部曲
- 旧电脑 存储服务器 系统,爷爷级PC,用白菜价内存搭建内存硬盘操作系统,老系统飞起来。...
- android MediaPlayer架构
- Hadoop 安装(详细步骤)