小弟我又来献丑了,不知道放在原创区是否合适,不行就用砖头飞我吧!
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术。特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性。
从文章的标题上看是Ajax的无刷新换肤,只是本人比较喜欢Ajax程序而已,其实普通的WEB程序与Ajax实现换肤原理都一样,所以下面两种程序的换肤功能都会介绍。
我将换肤功能从复杂程度上分为二个类别:
1.换图片、CSS文件,但是不换模版(所谓的页面排版不变)。
2.换图片、CSS文件,模版(页面排版也改变,与CNBLOGS一样的换肤功能)。
稍微了解的人都知道第2个类别的换肤比较复杂,因为要改变所有的页面结构,一般我们是准备很多不同的模版文件,具体的方法下面会详细说明,我们还可以充分发挥Ajax的动态交互功能,来实现无刷新换肤。
现在让我向大家描述一下所有WEB程序换肤功能的实现原理,下面所说的预览并不是截图让用户选择,而是直接换上,感觉好了再存。
1.换图片
换图片的方法是将存放图片的文件夹命名编号,例如:images1、images2、images3……然后在路径的字符串上做手脚,现在来实现预览功能,普通WEB程序建立一个session会话变量,比如session("skin"),来替代1,2,3这样的编号,之所以要用session会话变量,想必大家都了解,是为了确保在页面刷新后不丢失数据。Ajax程序也是同样道理,因为回调也会丢失数据。改变这个变量的值也就是改变了图片的路径,自然换起来就简单,普通的WEB程序就刷新页面,Ajax程序回调整个页面(把所有的结构嵌在页面DIV中,回调)。
若要保存选定的皮肤,就把变量的值存数据库,初始页面时就在页面的Page_Load中将数据库中的值赋给变量,如何判断是用Session("skin")的值还是是数据库字段值,这个简单,判断Session("skin")的值是否为空,不为空就调用Session("skin")值咯!
预览还是要用Session记录,然后用数据库的字段值初始,判断方法同上。
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术。特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性。
从文章的标题上看是Ajax的无刷新换肤,只是本人比较喜欢Ajax程序而已,其实普通的WEB程序与Ajax实现换肤原理都一样,所以下面两种程序的换肤功能都会介绍。
我将换肤功能从复杂程度上分为二个类别:
1.换图片、CSS文件,但是不换模版(所谓的页面排版不变)。
2.换图片、CSS文件,模版(页面排版也改变,与CNBLOGS一样的换肤功能)。
稍微了解的人都知道第2个类别的换肤比较复杂,因为要改变所有的页面结构,一般我们是准备很多不同的模版文件,具体的方法下面会详细说明,我们还可以充分发挥Ajax的动态交互功能,来实现无刷新换肤。
现在让我向大家描述一下所有WEB程序换肤功能的实现原理,下面所说的预览并不是截图让用户选择,而是直接换上,感觉好了再存。
1.换图片
换图片的方法是将存放图片的文件夹命名编号,例如:images1、images2、images3……然后在路径的字符串上做手脚,现在来实现预览功能,普通WEB程序建立一个session会话变量,比如session("skin"),来替代1,2,3这样的编号,之所以要用session会话变量,想必大家都了解,是为了确保在页面刷新后不丢失数据。Ajax程序也是同样道理,因为回调也会丢失数据。改变这个变量的值也就是改变了图片的路径,自然换起来就简单,普通的WEB程序就刷新页面,Ajax程序回调整个页面(把所有的结构嵌在页面DIV中,回调)。
若要保存选定的皮肤,就把变量的值存数据库,初始页面时就在页面的Page_Load中将数据库中的值赋给变量,如何判断是用Session("skin")的值还是是数据库字段值,这个简单,判断Session("skin")的值是否为空,不为空就调用Session("skin")值咯!
2.换CSS
这个很简单拉,用JS就可以搞定,老套路,将CSS文件的命名编号css1.css、css2.css……在首页将CSS文件进行链接。
<
link
id
="cssStyle"
rel
="stylesheet"
type
="text/css"
/>
自己定义ID标识,然后用下面的JS代码初始化
1
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
2 <!--
3 function window.onload()
4 {
5 changeCSS(''css1.css''); // 当然''css1.css''是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了
6 }
7 function changeCSS(CSSLink)
8 {
9 cssStyle.href = CSSLink;
10 }
11 -->
12 </ script >
2 <!--
3 function window.onload()
4 {
5 changeCSS(''css1.css''); // 当然''css1.css''是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了
6 }
7 function changeCSS(CSSLink)
8 {
9 cssStyle.href = CSSLink;
10 }
11 -->
12 </ script >
3.换模版
这个换起来有一点复杂,先说个比较笨的方法,就是准备不同的模版程序,对文件夹编号,然后通过数据库调用!这个确实很吃力,因为要准备不同的模版,只适用于模块较多和排版做大范围的改变,具体实现也同上,预览时用Session把编号保存起来,普通WEB改变Session后刷新页面,Ajax回调整个页面结构。
如果你的模块较少,而且只是简单的改变几个模块的位置,那就用CSS中的position:absolute;吧!让模块漂浮起来,比如将不同模块嵌在DIV中,用JS改变它们的top与left就能马上实现预览功能,当然这个就需要自己写JS来定位,下面我简单的写了2个模块的换肤。
1
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
2 <!--
3 function window.onload()
4 {
5 changeSkin('' 1 ''); // 当然 ''1'' 是从数据库或Session中读取的初始模版值。
6 }
7 function setDivTop(divID,topValue)
8 {
9 document.getElementById(divID).style.top = topValue;
10 }
11 function setDivLeft(divID,leftValue)
12 {
13 document.getElementById(divID).style.left = leftValue;
14 }
15 // 这个JS方法就要自己写了,一个一个的将模块定位吧!
16 function changeSkin(skinNO)
17 {
18 switch (skinNO)
19 {
20 case " 1 " :
21 setDivTop(''divNews'',''100px'');
22 setDivLeft(''divNews'',''100px'');
23 setDivTop(''divMusic'',''300px'');
24 setDivLeft(''divMusic'',''300px'');
25 break ;
26 case " 2 " :
27 setDivTop(''divNews'',''300px'');
28 setDivLeft(''divNews'',''300px'');
29 setDivTop(''divMusic'',''100px'');
30 setDivLeft(''divMusic'',''100px'');
31 break ;
32 }
33 }
34 -->
35 </ script >
2 <!--
3 function window.onload()
4 {
5 changeSkin('' 1 ''); // 当然 ''1'' 是从数据库或Session中读取的初始模版值。
6 }
7 function setDivTop(divID,topValue)
8 {
9 document.getElementById(divID).style.top = topValue;
10 }
11 function setDivLeft(divID,leftValue)
12 {
13 document.getElementById(divID).style.left = leftValue;
14 }
15 // 这个JS方法就要自己写了,一个一个的将模块定位吧!
16 function changeSkin(skinNO)
17 {
18 switch (skinNO)
19 {
20 case " 1 " :
21 setDivTop(''divNews'',''100px'');
22 setDivLeft(''divNews'',''100px'');
23 setDivTop(''divMusic'',''300px'');
24 setDivLeft(''divMusic'',''300px'');
25 break ;
26 case " 2 " :
27 setDivTop(''divNews'',''300px'');
28 setDivLeft(''divNews'',''300px'');
29 setDivTop(''divMusic'',''100px'');
30 setDivLeft(''divMusic'',''100px'');
31 break ;
32 }
33 }
34 -->
35 </ script >
这个可以用几个按钮调用这个changeSkin(skinNO)方法,直接看到效果。
若要保存就存数据库吧!用window.onload()事件初始。
就写到这里了,马马乎乎,丢砖吧!
下面提供了几个Ajax换肤例子 并且附源码供大家下载!
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 测试 </ title >
5 < link id ="cssStyle" rel ="stylesheet" type ="text/css" />
6 < script language ="javascript" type ="text/javascript" >
7 <!--
8 function window.onload()
9 {
10 // 没有做数据库与Session的存储,所以初始值赋固定初始值,具体使用请用数据库与Session存储并初始化。
11 changeSkin('' 1 '');
12 changeSkin2('' 1 '');
13 changeCSS(''css1.css'');
14 }
15 function setDivTop(divID,topValue)
16 {
17 document.getElementById(divID).style.top = topValue;
18 }
19 function setDivLeft(divID,leftValue)
20 {
21 document.getElementById(divID).style.left = leftValue;
22 }
23 // 这个JS方法就要自己写了,一个一个的将模块定位吧!
24 function changeSkin(skinNO)
25 {
26 switch (skinNO)
27 {
28 case " 1 " :
29 setDivTop(''divWrite'',''70px'');
30 setDivLeft(''divWrite'',''10px'');
31 setDivTop(''divRead'',''70px'');
32 setDivLeft(''divRead'',''300px'');
33 break ;
34 case " 2 " :
35 setDivTop(''divWrite'',''70px'');
36 setDivLeft(''divWrite'',''300px'');
37 setDivTop(''divRead'',''70px'');
38 setDivLeft(''divRead'',''10px'');
39 break ;
40 }
41 }
42 // 这个方法模拟Ajax回调不同的模版,并且模拟更换图片
43 function changeSkin2(skinNO)
44 {
45 switch (skinNO)
46 {
47 case " 1 " :
48 document.getElementById(''divAjax'').innerHTML = " <div style='' width:200px;border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image1/write.gif'' /><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /></div><div style='' width:200px; border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image1/read.gif'' /><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /></div> " ;
49 break ;
50 case " 2 " :
51 document.getElementById(''divAjax'').innerHTML = " <div style='' width:200px; border-style:dashed; border-color:Aqua; border-width:3px;'' id=''divRead''><IMG SRC=''image2/read.gif'' /><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /></div><div style='' width:200px;border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image2/write.gif'' /><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /></div> " ;
52 break ;
53 }
54 }
55 function changeCSS(CSSLink)
56 {
57 cssStyle.href = CSSLink;
58 }
59 -->
60 </ script >
61 </ head >
62 < body >
63 < span class ="font_12" > 点击动态改变DIV位置更换模版 </ span >< br />
64 < input onclick ="changeSkin(''1'');" type ="button" value ="Skin1" /> < input onclick ="changeSkin(''2'');" type ="button" value ="Skin2" />
65 < div style =" top:70px; left:10px; position:absolute; border-style:dashed; border-color:Aqua; border-width:3px;" id ="divWrite" >< IMG SRC ="image1/write.gif" />< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br /></ div >
66 < div style =" top:70px; left:300px; position:absolute; border-style:dashed; border-color:Aqua; border-width:3px;" id ="divRead" >< IMG SRC ="image1/read.gif" />< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br /></ div >
67 < br />< br />< br />< br />< br />< br />< br />
68 < hr />
69 < span class ="font_12" > 点击模拟Ajax回调方法更换模版 </ span >< br />
70 < input onclick ="changeSkin2(''1'');" type ="button" value ="Skin1" /> < input onclick ="changeSkin2(''2'');" type ="button" value ="Skin2" />
71 < div id ="divAjax" ></ div >
72 < hr />
73 < span class ="font_12" > 点击更换CSS </ span >< br />
74 < input onclick ="changeCSS(''css1.css'')" type ="button" value ="CSS1" /> < input onclick ="changeCSS(''css2.css'')" type ="button" value ="CSS2" />
75 </ body >
76 </ html >
若要改变就随便准备几个按钮什么,只要是能直接调用changeCSS(CSSLink)这个方法的都行!(不刷新页面就可以直接看到效果)2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 测试 </ title >
5 < link id ="cssStyle" rel ="stylesheet" type ="text/css" />
6 < script language ="javascript" type ="text/javascript" >
7 <!--
8 function window.onload()
9 {
10 // 没有做数据库与Session的存储,所以初始值赋固定初始值,具体使用请用数据库与Session存储并初始化。
11 changeSkin('' 1 '');
12 changeSkin2('' 1 '');
13 changeCSS(''css1.css'');
14 }
15 function setDivTop(divID,topValue)
16 {
17 document.getElementById(divID).style.top = topValue;
18 }
19 function setDivLeft(divID,leftValue)
20 {
21 document.getElementById(divID).style.left = leftValue;
22 }
23 // 这个JS方法就要自己写了,一个一个的将模块定位吧!
24 function changeSkin(skinNO)
25 {
26 switch (skinNO)
27 {
28 case " 1 " :
29 setDivTop(''divWrite'',''70px'');
30 setDivLeft(''divWrite'',''10px'');
31 setDivTop(''divRead'',''70px'');
32 setDivLeft(''divRead'',''300px'');
33 break ;
34 case " 2 " :
35 setDivTop(''divWrite'',''70px'');
36 setDivLeft(''divWrite'',''300px'');
37 setDivTop(''divRead'',''70px'');
38 setDivLeft(''divRead'',''10px'');
39 break ;
40 }
41 }
42 // 这个方法模拟Ajax回调不同的模版,并且模拟更换图片
43 function changeSkin2(skinNO)
44 {
45 switch (skinNO)
46 {
47 case " 1 " :
48 document.getElementById(''divAjax'').innerHTML = " <div style='' width:200px;border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image1/write.gif'' /><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /></div><div style='' width:200px; border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image1/read.gif'' /><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /></div> " ;
49 break ;
50 case " 2 " :
51 document.getElementById(''divAjax'').innerHTML = " <div style='' width:200px; border-style:dashed; border-color:Aqua; border-width:3px;'' id=''divRead''><IMG SRC=''image2/read.gif'' /><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /><span class=''font_12''>读取模块读取模块读取模块读取模块</span><br /></div><div style='' width:200px;border-style:dashed; border-color:Aqua; border-width:3px;''><IMG SRC=''image2/write.gif'' /><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /><span class=''font_12''>书写模块书写模块书写模块书写模块</span><br /></div> " ;
52 break ;
53 }
54 }
55 function changeCSS(CSSLink)
56 {
57 cssStyle.href = CSSLink;
58 }
59 -->
60 </ script >
61 </ head >
62 < body >
63 < span class ="font_12" > 点击动态改变DIV位置更换模版 </ span >< br />
64 < input onclick ="changeSkin(''1'');" type ="button" value ="Skin1" /> < input onclick ="changeSkin(''2'');" type ="button" value ="Skin2" />
65 < div style =" top:70px; left:10px; position:absolute; border-style:dashed; border-color:Aqua; border-width:3px;" id ="divWrite" >< IMG SRC ="image1/write.gif" />< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br />< span class ="font_12" > 书写模块书写模块书写模块书写模块 </ span >< br /></ div >
66 < div style =" top:70px; left:300px; position:absolute; border-style:dashed; border-color:Aqua; border-width:3px;" id ="divRead" >< IMG SRC ="image1/read.gif" />< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br />< span class ="font_12" > 读取模块读取模块读取模块读取模块 </ span >< br /></ div >
67 < br />< br />< br />< br />< br />< br />< br />
68 < hr />
69 < span class ="font_12" > 点击模拟Ajax回调方法更换模版 </ span >< br />
70 < input onclick ="changeSkin2(''1'');" type ="button" value ="Skin1" /> < input onclick ="changeSkin2(''2'');" type ="button" value ="Skin2" />
71 < div id ="divAjax" ></ div >
72 < hr />
73 < span class ="font_12" > 点击更换CSS </ span >< br />
74 < input onclick ="changeCSS(''css1.css'')" type ="button" value ="CSS1" /> < input onclick ="changeCSS(''css2.css'')" type ="button" value ="CSS2" />
75 </ body >
76 </ html >
预览还是要用Session记录,然后用数据库的字段值初始,判断方法同上。