easyui换主题，并记录在cookie.以及cookie作用域介绍

如下是网上摘录的：

　　　　　　-------START----------------------

注：引入JS的顺序jquery>cookie>easyuicss>changeEasyUITheme.js

首先将easyui的样式文件加入一个ID，这里命名为easyuiTheme，然后在样式文件下面加入一个JS文件

?

1 2 3 4 5 6 7 8 9

<script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/jquery-1.7.1.min.js"></script>   <script type="text/javascript" charset="UTF-8" src="jslib/jquery.cookie.js"></script>   <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/jquery-easyui-1.2.5/themes/gray/easyui.css"> <script type="text/javascript" charset="UTF-8" src="jslib/changeEasyuiTheme.js"></script> <link rel="stylesheet" type="text/css" href="jslib/jquery-easyui-1.2.5/themes/icon.css"> <script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/jquery.easyui.min.js"></script> <script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/locale/easyui-lang-zh_CN.js"></script>

　　

changeEasyuiTheme.js文件的内容是

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function changeThemeFun(themeName) {/* 更换主题 */     var $easyuiTheme = $('#easyuiTheme');     var url = $easyuiTheme.attr('href');     var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';     $easyuiTheme.attr('href', href);       var $iframe = $('iframe');     if ($iframe.length > 0) {         for ( var i = 0; i < $iframe.length; i++) {             var ifr = $iframe[i];             $(ifr).contents().find('#easyuiTheme').attr('href', href);         }     }       $.cookie('easyuiThemeName', themeName, {         expires : 7     }); }; if ($.cookie('easyuiThemeName')) {     changeThemeFun($.cookie('easyuiThemeName')); }

　　

jquery.cookie.js的内容是

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

jQuery.cookie = function (key, value, options) {       // key and value given, set cookie...     if (arguments.length > 1 && (value === null || typeof value !== "object")) {         options = jQuery.extend({}, options);           if (value === null) {             options.expires = -1;         }           if (typeof options.expires === 'number') {             var days = options.expires, t = options.expires = new Date();             t.setDate(t.getDate() + days);         }           return (document.cookie = [             encodeURIComponent(key), '=',             options.raw ? String(value) : encodeURIComponent(String(value)),             options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE             options.path ? '; path=' + options.path : '',             options.domain ? '; domain=' + options.domain : '',             options.secure ? '; secure' : ''         ].join(''));     }       // key and possibly options given, get cookie...     options = value || {};     var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;     return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };

使用的时候

?

1 2	changeThemeFun('default'); changeThemeFun('gray');

　　　　　　　　　　-----END-----------

但是，问题来了。整个框架在首页的时候可以根据cookie中的 $.cookie('easyuiThemeName') 获取到指，但是其他子页面却无法获取。

接着找资料，原来是cookie的作用域问题。

cookie的一个属性：Path – 路径。指定与cookie关联的WEB页。值可以是一个目录，或者是一个路径。如果http://www.baidu.com/a/index.html 建立了一个cookie，如果不设置cookie的path值，那么默认在http://www.baidu.com/a/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个 cookie。但是在http://www.baidu.com/b目录下无法访问到这个cookie。这时，我们要把cookies的path属性设置成“/”。在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享cookies。

上面的问题解决办法：

?

1 2 3

$.cookie('easyuiThemeName', themeName, {         expires : 7 , path:"/"     });

　　

　　注：,path:"/" 为增加部分

思维拓展：

如果我们想让 blog.baidu.com 能够访问bbs.baidu.com设置的cookies，该怎么办?

但是有个问题来了，不能把cookies域属性设置成与设置它的服务器的所在域不同的值。

介绍另一个cookie的属性 ：Domain – 域。指定关联的WEB服务器或域。值是域名，比如baidu.com。这是对path路径属性的一个延伸。 我们可以把domain属性设置成“baidu.com”，并把path属性设置成“/”。