网页换皮肤的实现

 

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