網頁換皮膚的實現

 

首先當然需要美工的支援了，對於同樣的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根據不同皮膚就會應用到。