网页换皮肤的实现

 

首先当然需要美工的支持了，对于同样的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根据不同皮肤就会应用到。