easyui换主题，并记录在cookie

最新推荐文章于 2022-10-13 10:33:18 发布

转载最新推荐文章于 2022-10-13 10:33:18 发布 · 2.4k 阅读

收录于

本文介绍了一种实现 EasyUI 主题切换的方法，并通过设置 cookie 记住用户选择的主题，确保下次打开页面时仍能应用该主题。

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

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

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

<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文件的内容是

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的内容是

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;
};

使用的时候

changeThemeFun('default');
changeThemeFun('gray');

标签: Easyui theme 换肤 easyuiTheme href iframe easyuiThemeName

文章除注明外均为原创，转载请注明出处： Easyui学习班
本文地址：: http://easyui.btboys.com/post-64.html

标签

#stylesheet #iframe #function #themes #null