一：簡介
1、 我們通常使用的easyui主題都是預設的主題、easyui給我提供了六個主題供我們使用（其中四個需要去下載主題的外掛程式）。
2、 default、gray是easyui提供的兩個、
3、 cupertino、dark-hive、pepper-grinder、sunny四個是提供的額外的主題外掛程式。
4、 使用cookies將我們最近選擇的一個主題儲存、方便我們下一次登入時看到的還是我們上次選擇的主題。
1、 default：
2、 dark-hive：下面的更換皮膚就是所要添加的功能、少了一個忘記補充了。
3、 gray、 sunny、 pepper-grinder、 cupertino不再貼圖、可以自己看看效果
三：實現步驟
1、 下載jquery.cookies.js外掛程式、：http://plugins.jquery.com/?s=cookies
2、 下載其他四個主題外掛程式、：http://www.jeasyui.com/extension/themes_jui.php最下面
3、 在包含含有改變主題的功能的頁面引入js。注意js引入位置：現引入jquery的js、緊跟著引入jquery.cookies.js。
<title>My JSP 'original.jsp' starting page</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script>
4、 注意看代碼中的引入主題的link、多添加了一個id、href也使用了變數的方式引入css檔案。變數的定義代碼：
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="css/easyui/<%=easyuiThemeName%>/easyui.css">
5、 在你想要添加更換主題的頁面某處添加一個下拉框（也可以是別的）、然後添加下拉框選項、使用選項的點擊事件觸發函數、改變主題css引入包進而動態改變主題。
<div style="padding:5px;"><a href="#" class="easyui-menubutton"data-options="menu:'#mm1',iconCls:'icon-help'">控制台</a></div><div id="mm1" style="width:150px;"><div data-options="iconCls:'icon-tip'">個人資訊</div><div data-options="iconCls:'icon-edit'"><span>更換皮膚</span><div style="width:150px;"><div onclick="javascript:changeTheme('default')">default</div><div onclick="javascript:changeTheme('gray')">gray</div><div onclick="javascript:changeTheme('sunny')">sunny</div><div onclick="javascript:changeTheme('dark-hive')">dark-hive</div><div onclick="javascript:changeTheme('pepper-grinder')">pepper-grinder</div><div onclick="javascript:changeTheme('cupertino')">cupertino</div></div></div></div>
6、 觸發函數：可以寫在自己定義的公用js中、關鍵是含有改變主題的頁面能調用到這個函數。函數代碼：
/** * 更換主題 */changeTheme = function(type){var $easyuiTheme = $('#easyuiTheme');var url = $easyuiTheme.attr('href');console.info(url);var href = url.substring(0, url.indexOf('easyui'))+ 'easyui/' + type + '/easyui.css';console.info(href);$easyuiTheme.attr('href',href);/* 如果使用了iframe 則要添加下面這段代碼、否則的話iframe中的內容不會出現樣式的改變var $iframe = $('iframe');if($ifram.length > 0){for ( var i = 0; i < $iframe.length; i++) {var ifr = $iframe[i];$(ifr).contents.find('#easyuiTheme').attr('href', href);}}*/$.cookie('easyuiThemeName', type, {expires : 7});};
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'original.jsp' starting page</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <%//從cookies中讀取主題名稱String easyuiThemeName = "default";Cookie cookies[] = request.getCookies();if(cookies != null && cookies.length > 0){for(int i=0; i<cookies.length; i++){if(cookies[i].getName().equals("easyuiThemeName")){easyuiThemeName = cookies[i].getValue();break;}}}%> <link id="easyuiTheme" rel="stylesheet" type="text/css" href="css/easyui/<%=easyuiThemeName%>/easyui.css"> <link rel="stylesheet" type="text/css" href="css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="css/easyui/demo.css"> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/chyUtils.js"></script> <script type="text/javascript"> function userManage(id){ console.info(id); if("door" == id){ $('#tt').tabs('select', 0); } if("userManage" == id){ $('#tt').tabs('select', 1); } } </script> </head> <body id="blayout" class="easyui-layout"> <div data-options="region:'north', split:false, href:'layout/north.jsp'" style="height:100px;"> </div> <div data-options="region:'east',title:'線上列表',split:true" style="width:160px;"></div> <div data-options="region:'west',title:'功能導航',split:true" style="width:160px;"> <div class="easyui-accordion" data-options="fit:true,border:false"> <div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;"> content1 </div> <div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px"> <ul> <li><a id="door" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true">門戶</a> </li> <li><a id="userManage" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true">使用者管理</a></li> </ul> </div> </div> </div> <div data-options="region:'center',title:'歡迎',"style="overflow: hidden;"> <div id="tt" class="easyui-tabs" data-options="fit:true,border:false,"> <div title="門戶" data-options="closable:true" > 門戶 </div> <div id="userManage" title="使用者管理" data-options="href:'layout/user.jsp',closable:true" > </div> </div> </div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>north.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"></head><body><table width=100% height="100%"><tr height="80%"><td></td><td></td><td></td></tr><tr height="20%"><td></td><td></td><td align="right"><div style="padding:5px;"><a href="#" class="easyui-menubutton"data-options="menu:'#mm1',iconCls:'icon-help'">控制台</a></div><div id="mm1" style="width:150px;"><div data-options="iconCls:'icon-tip'">個人資訊</div><div data-options="iconCls:'icon-edit'"><span>更換皮膚</span><div style="width:150px;"><div onclick="javascript:changeTheme('default')">default</div><div onclick="javascript:changeTheme('gray')">gray</div><div onclick="javascript:changeTheme('sunny')">sunny</div><div onclick="javascript:changeTheme('dark-hive')">dark-hive</div><div onclick="javascript:changeTheme('pepper-grinder')">pepper-grinder</div><div onclick="javascript:changeTheme('cupertino')">cupertino</div></div></div></div></td></tr></table></body></html>
3、chyUtils.js：
serializeObject = function(form) {var o = {};$.each(form.serializeArray(), function(index) {if (o[this['name']]) {o[this['name']] = o[this['name']] + this['value'];} else {o[this['name']] = this['value'];}});return o;};/** * 擴充的關於編輯狀態的 對要輸入日期的控制項使用 */$.extend($.fn.datagrid.defaults.editors, {datetimebox : {init : function(container, options) {var editor = $('<input />').appendTo(container);options.editable = false;editor.datetimebox(options);return editor;},getValue : function(target) {return $(target).datetimebox('getValue');},setValue : function(target, value) {$(target).datetimebox('setValue', value);},resize : function(target, width) {$(target).datetimebox('resize', width);},destroy : function(target) {$(target).datetimebox('destroy');},}});/** * 動態選擇處於修改狀態的行中的某些列是否可編輯 */$.extend($.fn.datagrid.methods, {addEditor : function(jq, param) {if (param instanceof Array) {$.each(param, function(index, item) {var e = $(jq).datagrid('getColumnOption', item.field);e.editor = item.editor;});} else {var e = $(jq).datagrid('getColumnOption', param.field);e.editor = param.editor;}},removeEditor : function(jq, param) {if (param instanceof Array) {$.each(param, function(index, item) {var e = $(jq).datagrid('getColumnOption', item);e.editor = {};});} else {var e = $(jq).datagrid('getColumnOption', param);e.editor = {};}}});/** * 擴充用於將後台傳入的長整型的表示時間的數值轉換成 "2014-01-07 16:45:45" 格式 */Date.prototype.format = function(format) {if (isNaN(this.getMonth())) {return '';}if (!format) {format = "yyyy-MM-dd hh:mm:ss";}var o = {"M+" : this.getMonth() + 1,"d+" : this.getDate(),"h+" : this.getHours(),"m+" : this.getMinutes(),"s+" : this.getSeconds(),"q+" : Math.floor((this.getMonth() + 3)/3),"S": this.getMilliseconds(),};if(/(y+)/.test(format)){format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));}for(var k in o){if(new RegExp("("+k+")").test(format)){format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substring(("", o[k]).length));}}};formatTime = function(form) {return new Date(form).format();};/** * 更換主題 */changeTheme = function(type){var $easyuiTheme = $('#easyuiTheme');var url = $easyuiTheme.attr('href');console.info(url);var href = url.substring(0, url.indexOf('easyui'))+ 'easyui/' + type + '/easyui.css';console.info(href);$easyuiTheme.attr('href',href);/* 如果使用了iframe 則要添加下面這段代碼、否則的話iframe中的內容不會出現樣式的改變var $iframe = $('iframe');if($ifram.length > 0){for ( var i = 0; i < $iframe.length; i++) {var ifr = $iframe[i];$(ifr).contents.find('#easyuiTheme').attr('href', href);}}*/$.cookie('easyuiThemeName', type, {expires : 7});};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
