easyui改变主题
1：改变主题，写入cookie
1 //创建命名空间easyui.theme 2 namespace('easyui.theme'); 3 4 /** 5 * 改变主题 6 */ 7 easyui.theme.changeTheme = function(themeName){ 8 let easyuiTheme = $('#easyuiTheme'); 9 let url = easyuiTheme.attr('href'); 10 let href = url.substring(0,url.indexOf('themes'))+'themes/'+themeName+'/easyui.css'; 11 easyuiTheme.attr('href',href);//改变整个页面中easyui主题的引用 12 let iframes = $('iframe'); 13 if(iframes.length>0){ 14 for(let i=0;i<iframes.length;i++){ 15 let iframe = iframes[i]; 16 $(iframe).contents().find('#easyuiTheme').attr('href',href);//改变内部iframe中easyui主题的引用 17 } 18 } 19 $.cookie('easyuiThemeName',themeName,{expires: 7}) 20 }
2：从cookie读，引入主题
<% /** easyui主题名称 */ String easyuiThemeName = "default"; Cookie[] cookies = request.getCookies(); if(cookies!=null&&cookies.length>0){ for(int i =0;i<cookies.length;i++){ Cookie cookie = cookies[i]; if(cookie.getName().equals("easyuiThemeName")){ easyuiThemeName = cookie.getValue(); } } } %> <link id="easyuiTheme" rel="stylesheet" href="${contextPath}/js/jquery-easyui-1.3.2/themes/<%=easyuiThemeName%>/easyui.css" type="text/css"></link>
3：配置主题，改变主题
1 <script type="text/javascript"> 2 $(function(){ 3 $('#menuButton').menubutton({ 4 menu: '#menu' 5 }); 6 }); 7 </script> 8 9 <div region="north" title="North Title" split="true" style="height:90px;"> 10 <a href="javascript:void(0)" id="menuButton" style="position: absolute;right: 5px;bottom: 5px" iconCls="icon-help">帮助</a> 11 <div id="menu" style="width:150px;"> 12 <div onclick="$.messager.show({title:'关于应用',msg:'easy学习使用~~'})">个人信息</div> 13 <div class="menu-sep"></div> 14 <div> 15 <span>更换主题</span> 16 <div style="width:120px;"> 17 <div onclick="easyui.theme.changeTheme('default')">default</div> 18 <div onclick="easyui.theme.changeTheme('gray')">gray</div> 19 <div onclick="easyui.theme.changeTheme('black')">black</div> 20 <div onclick="easyui.theme.changeTheme('bootstrap')">bootstrap</div> 21 <div onclick="easyui.theme.changeTheme('metro')">metro</div> 22 </div> 23 </div> 24 </div> 25 </div>
