JQuery实现多页面换肤

换肤有很多种，这里使用选择皮肤时，jQuery动态加载css，并且保存到cookie中，以实现下一次登陆时，自动使用当前皮肤。
多页面换肤其实和单页面换肤差不多，只需要把换肤函数作为一个公共函数，每个页面调用。

具体步骤（看代码）：

简单做了两个页面index.html,base.html，以实现在其中一个切换皮肤后，另外一个页面也可以自动更换皮肤。

html板块：

 <div id="header">
        <a id="logo" href="#">Jane Shopping</a>
        <ul id="skin">
            <li id="skin_0" title="蓝色" class="selected">蓝色</li>
            <li id="skin_1" title="紫色">紫色</li>
            <li id="skin_2" title="红色">红色</li>
            <li id="skin_3" title="天蓝色">天蓝色</li>
            <li id="skin_4" title="橙色">橙色</li>
            <li id="skin_5" title="淡绿色">淡绿色</li>
        </ul>

    </div>

css代码块：

/*切换皮肤样式*/
#skin { 
	float:right; 
	margin:10px; 
	padding:4px; 
	width:120px; 
	list-style:none; 
	border: 1px solid #CCCCCC; 
	background:#FFF;
}
#skin li { 
	float:left; 
	margin-right:4px; 
	width:15px; 
	height:15px; 
	text-indent:-9999px; 
	overflow:hidden; 
	display:block; 
	cursor:pointer; 
	background-image:url(../images/theme.gif); 
}
#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

JQuery代码块：

    cookie：
    // //创建一个cookie并设置 cookie的有效路径：
    // $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
    // //注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。
    // //如果想让一个页面读取另一个页面设置的cookie，
    // //必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。
    // //将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突） 。 
    读取cookie：
    // $.cookie('the_cookie'); // cookie存在 => 'the_value'
    // $.cookie('not_existing'); // cookie不存在 => null

    // //删除cookie，通过传递null作为cookie的值即可：

    $(function () {
        //改变背景色 实现换肤
        $("#header #skin li").click(function () {
            skin(this.id);
        });
        var cookie = $.cookie('cookieName'); //获得cookie的值
        if (cookie) {
            skin(cookie);
        }
    });

    function skin(skinid) {
        $("#" + skinid).addClass("selected").siblings().removeClass("selected");
        $("#cssfile").attr("href", "styles/skin/" + skinid + ".css");
        $.cookie('cookieName', skinid, { expires: 7, path: '/' })//创建一个cookie
    }

如图所示：

我使用cookie记录选择设置的主题皮肤样式，但是当cookie到期或者清除了浏览器的COOKIE，亦或者换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，并写入数据库，下次该用户登录就可以直接读取主题，当然，该方法应用在有用户权限范围的系统，如后台管理系统，个人中心等。