今天研究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;
};
完成这些之后,就可以更换主题了,并且下次进入之后还是上次更改的主题。