首先当然需要美工的支持了，对于同样的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根据不同皮肤就会应用到。
63
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
