首先当然需要美工的支持了,对于同样的html,引用的img,及css需要做n套实现(n等于需要的皮肤数量)
1.在需要换肤的时候,根据事件触发js,根据颜色不同给用户的某个cookie置上一个值.比如下面这样,给一个name=css的cookie注入不同的值,代表选择了不同
< a href ="#" onclick ="change('css','blue')" > 样式1 </ a >< br > < a href ="#" onclick ="change('css','green')" > 样式2 </ a >< br > < a href ="#" onclick ="change('css','purple')" > 样式3 </ a >< br >
function change(name,value) ... { var expires = new Date( " June 3, 2010 " ); var path = " / " ; var domain; var secure; setCookie(name, value, expires, path, domain, secure); // document.cookie= name + "=" +value; }
2.再用程序读cookie,将cookie对应的不同路径写到session中,如下代码会把选择的皮肤放到一个session变量里面,这样在所有页面上均可以通过${cssDir}来取这个值
// 根据cookie加载页面样式 Cookie[] cookies = request.getCookies(); if (cookies != null ) ... { for (Cookie c : cookies) ... { if (c.getName().equals( " css " )) ... { session.put( " cssDir " , c.getValue()); } } }else ... { session.put( " cssDir " , " blue " ); // 默认蓝色皮肤 }
3,html中引用的css及img路径使用同样的变量,就会解析得到不同皮肤的样式。比如我把css的目录做成如下的:
那么在页面上通过
<link rel="stylesheet" type="text/css" href="css/webMail/${cssDir}/css.css ">
由于${cssDir}/ 是动态替换的,因此上面3个目录下的css根据不同皮肤就会应用到。