网页换皮肤的实现

 

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