前端-easyui动态切换主题

引入easyui的jsp页面

从cookies获取
<%
	// 主题设置
	String themeName = "default"; 
	Cookie[] cookies = request.getCookies(); 
	//以下代码根据个人情况自己写,原理就是找到指定名称的Cookie就将此名称的Cookie值赋值赋值给定义的变量 
	if(cookies != null && cookies.length > 0) { 
		for(int i = 0; i < cookies.length; i++) { 
			if(cookies[i].getName().equals("easyuiThemeName")) { 
				themeName = cookies[i].getValue(); 
				break;
			}
		}
	}
%>
引入css样式
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="/easyui/themes/<%=themeName%>/easyui.css">

初始加载的.js文件增加方法

jQuery.cookie = function(key, value, options) {
	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(): '',
				options.path ? '; path=' + options.path : '',
				options.domain ? '; domain=' + options.domain : '',
				options.secure ? '; secure' : '' ].join(''));
	}
	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;
};

/**
 * 更换主题
 */
function changeThemeFun(themeName) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    console.log(url);
    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
    });
}

$(document).ready(function(){
	if ($.cookie('easyuiThemeName')) {
	    changeThemeFun($.cookie('easyuiThemeName'));
	}
});

切换主题方法 : [依照实际有的主题编写即可]

<div id="mm0" style="width:100px;">
		<div ><a id="loginOut" onclick="changeThemeFun('default');">默认风格</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('gray');">gray</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('bootstrap');">bootstrap</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('black');">black</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('metro-blue');">metro-blue</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('metro-gray');">metro-gray</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('metro-green');">metro-green</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('metro-orange');">metro-orange</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('metro-red');">metro-red</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('ui-cupertino');">ui-cupertino</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('ui-dark-hive');">ui-dark-hive</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('ui-pepper-grinder');">ui-pepper-grinder</a></div>
		<div ><a id="loginOut" onclick="changeThemeFun('ui-sunny');">ui-sunny</a></div>
</div>

主题下载地址[需要分的呦] : 
https://download.csdn.net/download/qq_17522211/10991959

ps : 除基本js外,还需引用jquery.jdirk.js

jquery.jdirk.js下载地址[需要分的呦]:
https://download.csdn.net/download/qq_17522211/10991963