网页换肤,基于MooTools or jQuery

我们都知道WEB2.0是以人为核心线索的网,为了更好的增强用户体验,一些比较流行的SNS社会网络,非常重视用户自定义功能,例如自定义新闻内容,可以任意拖动新闻内容,还可以选择网页皮肤,例如:谷歌,雅虎,腾讯等都类似的功能。

网页换肤的原理是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤记入Cookie中,这样用户下次访问时,就可以显示用户自定义的皮肤了。

options-style-file

 

MooTools Demo  jQuery Demo

 

首先设置HTML的结构,在网页中添加皮肤选择按钮和基本内容,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <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 id="div_side_0">
		<div id="news">
		    <h1 class="title">时事新闻</h1>
		</div>
    </div>
 
    <div id="div_side_1">
		<div id="game">
			<h1 class="title">娱乐新闻</h1>
		</div>
    </div>

然后根据HTML代码预定义几套换肤用的样式,分别有灰色,紫色,红色等6套,默认是灰色。

在设计HTML代码时,有一个小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同,这样就可以使完成换肤操作简化许多。

然后为HTML代码添加样式,注意HTML结构要有一个带id的样式表链接,通过操作该链接的href属性的值,从而实现换肤。代码如下:

默认的样式换肤文件

1
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

皮肤选择按钮美化代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
*{
    margin:0px;
    padding:0px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
	width:210px;
    padding-right:0px;
	list-style:none;
    border: 1px solid #CCCCCC;
	overflow:hidden;
    }
#skin li{
	float:left;
    margin-right:5px;
    width:15px;
    height:15px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	cursor:pointer;
	background-image:url(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 !important;
}
#skin_1.selected{
	background-position:15px 15px !important;
}
#skin_2.selected{
	background-position:35px 15px !important;
}
#skin_3.selected{
	background-position:55px 15px !important;
}
#skin_4.selected{
	background-position:75px 15px !important;
}
#skin_5.selected{
	background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
	text-decoration: none;
	color: #333333;
}
a:visited {
	color: #333333;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}

最后为皮肤选择按钮添加单击事件,有如下两个步骤:

  1. 当皮肤选择按钮被单击后,当前皮肤就被勾选。
  2. 将网页内容换肤。

首先完成第一步。

1
2
3
4
5
6
7
8
9
10
11
12
 var $li =$$('#skin li');
 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
 
  });

然后完成第二步,设置网页内容皮肤。根据<link>标签元素的id,此时可以通过set()方法来设置<link>标签元素的href属性设置不同的值,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
 var $li =$$('#skin li');
 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
 
  });

使用MooTools的Cookie方法的Cookie.write()方法,把当前选择的皮肤保存进Cookie中,在mootools中支持两种Cookie的读写方式,一种是普通方式(Object: Cookie ),即键值对方式,而另一种是Hash表方式(Hash.Cookie ),具体用法我们不作解释,请查看MooTools Doc。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
 var $li =$$('#skin li'); 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
	//使用MooTools的Cookie插件
	Cookie.write('MyCssSkin', this.id, {path: '/',duration: 10});
 });

保存进Cookie后,就可以通过Cookie来获取当前的皮肤了。如果Cookie的确存在的话,则将当前皮肤设置为Cookie记录的值,代码如下:

1
2
3
4
5
6
7
8
9
10
   var cookie_skin  = Cookie.read('MyCssSkin');
   // alert(cookie_skin);
   if(cookie_skin){
	    var liname=$(cookie_skin);
	  liname.addClass('selected');
	   var siblings = liname.getParent().getChildren().erase(liname); 
	   siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	   $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	   Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
   }

完整的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEvent('domready', function() {
 var $li =$$('#skin li');
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
 
	Cookie.write('MyCssSkin', this.id, {path: '/',duration: 10});
	//$.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });
  });
 
  var cookie_skin  = Cookie.read('MyCssSkin');
   // alert(cookie_skin);
  if(cookie_skin){
	    var liname=$(cookie_skin);
	  liname.addClass('selected');
	   var siblings = liname.getParent().getChildren().erase(liname); 
	   siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	   $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	   Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
  }						 
 
});

此时,网页换肤功能不仅能正常换肤,而且也能够保存到Cookie中,当前用户刷新网页后依然是当前的皮肤。

我们回头再看一下代码,发现有许多的代码是重复的,并且很有规律,为了提高我们的代码复用率,我们把代码的公共部分放入一个公共函数里,方便多次调用。

优化后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//MooTools方法扩展,类似于jQuery 的siblings()方法
Element.implement({
	getSiblings: function(match) {
		return this.getParent().getChildren(match).erase(this);
	}
});
 
window.addEvent('domready', function() {
	var $li =$$('#skin li');
	$li.addEvent('click',function(){
		switchSkin( this.id );
	});
	var cookie_skin = Cookie.read('MyCssSkin');
	if (cookie_skin) {
		switchSkin( cookie_skin );
	}								 
});
function switchSkin(cookie_skin){
	 var liname=$(cookie_skin);
	 liname.addClass('selected');
	 /*var siblings = liname.getParent().getChildren().erase(liname)*/
	 var siblings = liname.getSiblings(); 
	 siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	 $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	 Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
}

我们的网页换肤,到此就完成了,效果如下:

我这里,我也提供jQuery实现的网页换肤,不过还需要 Klaus Hart l写的jQuery Cookie 插件

The jQuery JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
	var $li =$("#skin li");
	$li.click(function(){
		switchSkin( this.id );
	});
	var cookie_skin = $.cookie( "MyCssSkin");
	if (cookie_skin) {
		switchSkin( cookie_skin );
	}
});
function switchSkin(skinName){
	$("#"+skinName).addClass("selected")      //当前<li>元素选中
	    .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
	$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
	$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
}

 

MooTools Demo  jQuery Demo

 

参考文献:《锋利的jQuery》第五章,作者:CssRain

站点统计