返回 ezj。
首先创建皮肤文件夹。
在 skins 文件夹中放两个文件,名称分别为:blue.css、red.css。内容分别为:
blue.css
body
{
color:blue;
}
red.css
body
{
color:red;
}
再在网页中创建一个控制风格切换的 HTML 及为其指定 CSS
HTML
<span class="skin blue">■</span>
<span class="skin red">■</span>
CSS
.skin{cursor:pointer;}
.blue{color:blue;}
.red{color:red;}
这样第一个小方块显示的就是蓝色,第二个小广场显示的就是红色。
第三步利用 ezj 来实现风格切换
<script type="text/javascript" src="ezj_v2.0Preview/ezj.js"></script>
<script type="text/javascript">
<!--
ezj.element.getByClass("skin").each(function(index, e){
ezj.element.addListener(e, "click", function(){
var skin = e.className.substr(e.className.lastIndexOf(" ") + 1);
ezj.css.addLink("skins/" + skin + ".css");
ezj.cookie.write("skin", skin, 30 * 24 * 3600);
});
});
//-->
</script>
这样用户点击风格切换时,ezj 就会根据最后一个 class 名称来确定风格,并加载相应的 CSS 文件。最重要的是它还会将 skin 记录到 Cookie 中,这里设置的过期时间为 30 天。
最后一步
当用户下一次打开网页时,根据记录的 Cookie 自动加载皮肤。以 ASP 为例。
<%
dim skin
skin = Request.Cookies("skin")
if skin <> "" then
Response.Write("<link rel=""stylesheet"" type=""text/css"" href=""/skins/" + skin + ".css"" />")
end if
%>
这样一个基本功能的网页风格切换就完成了。当然还有许多地方可以润色。