|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
道理:经由过程存取cookie和dom操纵挪用分歧的款式表文件来完成前台换肤.
换肤示例下载:sour.rar
Html代码部分:
1.要有一个带id的款式表链接,我们要经由过程操纵这个链接来挪用分歧的href.
<linkhref="CSS/main0.css"rel="stylesheet"type="text/css"id="cssfile"/>
2.皮肤选择按钮(背景为每一个li增加onclick事务,触发换肤功效)
<ulid="skin">
<liid="skin_0"title="灰色">灰色</li>
<liid="skin_1"title="绿色">绿色</li>
<liid="skin_2"title="黄色">黄色</li>
<liid="skin_3"title="蓝色">蓝色</li>
<liid="skin_4"title="粉色">粉色</li>
<liid="skin_5"title="紫色">紫色</li>
</ul>
Js部分:
1.换肤办法
//设置cookie,按钮选中形态,页面皮肤
skin.setSkin=function(n){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.className="";//初始化按钮形态
}
skin.setCookie(n);//保留以后款式
$("skin_"+n).className="selected";//设置选中皮肤按钮的款式
$("cssfile").href="css/main"+n+".css";//设置页面款式
}
2.存取cookie
//将以后皮肤n存到cookie
skin.setCookie=function(n){
varexpires=newDate();
expires.setTime(expires.getTime()+24*60*60*365*1000);
varflag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//前往用户设置的皮肤款式
skin.readCookie=function(){
varskin=0;
varmycookie=document.cookie;
varname="Skin_Cookie";
varstart1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//假如没有设置则显现默许款式
}
else{
varstart=mycookie.indexOf("=",start1)+1;
varend=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
varvalues=unescape(mycookie.substring(start,end));
if(values!=null)
{
skin=values;
}
}
returnskin;
}
3.绑定换肤按钮事务
skin.addEvent=function(){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤款式
window.onload=function(){
skin.setSkin(skin.readCookie());//依据读取cookie前往值设置皮肤款式
skin.addEvent();//绑定按钮事务
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 |
|