EasyUI更换主题并且记住cookie的方法

今天研究easyui更换皮肤，在网上找到了一些资料，并且有一些自己的见解，希望和大家分享一下。

首先，有一个changeThenes的function 这个function我个人建议单独写到一个js文件中，方便维护，之后，关于引用的问题，我在写这个功能之前，每个JSP页面的css和js都是单独引入的，但是更换主题时，要给<link>标签加上id，我的页面有很多，这可是大工程，所以我干脆写了一个专门做引入的jsp页面

代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!-- easyUI核心文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/locale/easyui-lang-zh_CN.js"></script>
<!-- cookie插件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jquery.cookie.js"></script>
<!-- easyUI样式表 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/CSS/themes/<s:property value="#cookie.easyuiThemeName.value" default="default"/>/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/CSS/themes/icon.css">

<script type="text/javascript" src="<%=request.getContextPath()%>/JS/changeThemes.js"></script>

这个文件我用的是Struts的标签库，没有用jstl，个人习惯问题，在引入时注意路径问题，因为这个路径我可是走了不少弯路。。。

我看网上说的引入文件的顺序要注意，我没有按照网上说的顺序，也可以运行，不知道为什么，其中，更换主题的菜单代码如下

<div id="menu">
	<a href="#" id="changeThemesMenu" class="easyui-menubutton">更换皮肤</a>
	<div id="changeThemes" style="width:120px;">
		<div οnclick="changeTheme('default')">默认主题</div>
		<div οnclick="changeTheme('black')">黑色主题</div>
		<div οnclick="changeTheme('bootstrap')">Bootstrap主题</div>
		<div οnclick="changeTheme('gray')">灰色主题</div>
		<div οnclick="changeTheme('metro')">Win8</div>
		<div οnclick="changeTheme('metro-blue')">Win8-蓝</div>
		<div οnclick="changeTheme('metro-gray')">Win8-灰</div>
		<div οnclick="changeTheme('metro-green')">Win8-绿</div>
		<div οnclick="changeTheme('metro-orange')">Win8-橙</div>
		<div οnclick="changeTheme('metro-red')">Win8-红</div>
	</div>
</div>

其中对于menu的js设置如下

$(function(){
	//菜单布局设置
	$("#changeThemesMenu").menubutton({
		menu:'#changeThemes',
		iconCls:'icon-edit'
	});
});

下边该写每个div里响应的function了

/**
 * easyUI更换主题的方法
 * @param {Object} themeName 主题的名称
 * @author ZHENGWEI
 * @date 2015-5-16
 */
function changeTheme(themeName){
	var themeCSS = $("#easyuiTheme");
	var url = themeCSS.attr('href');
	var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
	themeCSS.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,{
             //记住cookie的天数
             expires: 7
	});
}

if($.cookie('easyuiThemeName')){
	changeTheme($.cookie('easyuiThemeName'));
}

还有最下边的if条件是必须的，如果没有的话，改变主题后点击弹出别的iframe之后主题还是原来的。

还需要一个cookie插件，这个官网可以下载的，不过手敲也可以，没有多少，cookie插件如下

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

 

完成这些之后，就可以更换主题了，并且下次进入之后还是上次更改的主题。