用 ezj 设置网页风格

作者:vkvi 来源:ITPOW(原创) 日期:2010-5-29

返回 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
%>

这样一个基本功能的网页风格切换就完成了。当然还有许多地方可以润色。

相关文章