2019-10-15 15:14:33 登录注册 RSS

当前位置: 公理网 >> 投诉不良 >> 后台管理界面web换肤及easyui实例

后台管理界面web换肤及easyui实例
发布时间:02-28| 来源:公理网 | 点击发表评论
一般的后台管理系统,都采用一个主框架,然后通过iframe方式,嵌入多个tab组件的方式,如下图的方式,换肤的按钮一般都放在主界面,为了使得整体系统的样式统一要求所有的iframe界面统一使用同一个皮肤,例如皮肤选择了红色,那么所有已打开的界面都要换成红色皮肤,还有新打开的界面也要使用红色的皮肤。


?
?
?解决已打开的iframe的方式,采用JS替换css
functiononChangeTheme(theme){varlink=$('#easyuicss');varthemeUrl='${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代码

functiononChangeTheme(theme){//设置cookie$.cookie('easyuiTheme',theme);varlink=$('#easyuicss');varthemeUrl='${ctx}/static/easyui/themes/'+theme+'/easyui.css';link.attr('href',themeUrl);$('#easyuicss',$("iframe").contents()).attr('href',themeUrl);}
?JSP代码

?

linkrel="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}
?
阅读更多
收藏

最新新闻

手机浏览

公理网 版权所有

公理网 Total 0.035495(s) query 6, 报料QQ:点击这里

给我发消息