后台管理界面web换肤及easyui实例

1.  一般的后台管理系统，都采用一个主框架，然后通过iframe方式，嵌入多个tab组件的方式，如下图的方式，换肤的按钮一般都放在主界面，为了使得整体系统的样式统一要求所有的iframe界面统一使用同一个皮肤，例如皮肤选择了红色，那么所有已打开的界面都要换成红色皮肤，还有新打开的界面也要使用红色的皮肤。
2. 
   
   
    
    
   
   •  解决已打开的iframe的方式，采用JS替换css

   	function onChangeTheme(theme){
   		var link = $('#easyuicss');
   		var themeUrl = '${ctx }/static/easyui/themes/'+theme+'/easyui.css';
   		link.attr('href', themeUrl);
   		$('#easyuicss',$("iframe").contents()).attr('href', themeUrl);
   	}

   •  解决新的iframe的思路
   一般来说有2种界面方式，1种是采用JS来动态加载，思路是在子界面嵌入JS代码来获取父界面的css样式，但是这种方式，比较麻烦，每一个子界面都要在界面加载完成之后动态的获取，第2种方式，是主界面在设置了样式之后，将样式的代码保存在cookie种，后台JSP通过EL表达式获取样式，来直接引入对应的css文件如下代码

JS代码

	function onChangeTheme(theme){
//设置cookie
		$.cookie('easyuiTheme',theme);
		var link = $('#easyuicss');
		var themeUrl = '${ctx }/static/easyui/themes/'+theme+'/easyui.css';
		link.attr('href', themeUrl);
		$('#easyuicss',$("iframe").contents()).attr('href', themeUrl);
	}

 JSP代码

 

<link rel="stylesheet" type="text/css" href="${ctx }/static/easyui/themes/${cookie.easyuiTheme.value==null?'bootstrap':cookie.easyuiTheme.value}/easyui.css" id="easyuicss">
//通过采用EL表达式，来获取cookie
${cookie.easyuiTheme.value==null?'bootstrap':cookie.easyuiTheme.value}