c 后台输出easyui html,后台老板管理界面web换肤及easyui实例

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

解决已打开的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代码

//通过采用EL表达式，来获取cookie

${cookie.easyuiTheme.value==null?'bootstrap':cookie.easyuiTheme.value}