easyui换主题，并记录在cookie

展开全文

昨天有群友发问，easyui换皮肤自己实现了，但是下次打开浏览器的时候，上次选中的皮肤又变回默认皮肤了，怎样让浏览器记住自己所选的皮肤。这里我给出我的解决方案。

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

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

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

changeEasyuiTheme.js文件的内容是

01function changeThemeFun(themeName) {/* 更换主题 */
02    var $easyuiTheme = $('#easyuiTheme');
03    var url = $easyuiTheme.attr('href');
04    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
05    $easyuiTheme.attr('href', href);
06 
07    var $iframe = $('iframe');
08    if ($iframe.length > 0) {
09        for ( var i = 0; i < $iframe.length; i++) {
10            var ifr = $iframe[i];
11            $(ifr).contents().find('#easyuiTheme').attr('href', href);
12        }
13    }
14 
15    $.cookie('easyuiThemeName', themeName, {
16        expires : 7
17    });
18};
19if ($.cookie('easyuiThemeName')) {
20    changeThemeFun($.cookie('easyuiThemeName'));
21}

jquery.cookie.js的内容是

01jQuery.cookie = function (key, value, options) {
02 
03    // key and value given, set cookie...
04    if (arguments.length > 1 && (value === null || typeof value !== "object")) {
05        options = jQuery.extend({}, options);
06 
07        if (value === null) {
08            options.expires = -1;
09        }
10 
11        if (typeof options.expires === 'number') {
12            var days = options.expires, t = options.expires = new Date();
13            t.setDate(t.getDate() + days);
14        }
15 
16        return (document.cookie = [
17            encodeURIComponent(key), '=',
18            options.raw ? String(value) : encodeURIComponent(String(value)),
19            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
20            options.path ? '; path=' + options.path : '',
21            options.domain ? '; domain=' + options.domain : '',
22            options.secure ? '; secure' : ''
23        ].join(''));
24    }
25 
26    // key and possibly options given, get cookie...
27    options = value || {};
28    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
29    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
30};

使用的时候

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