在Ajax程序中实现无刷新换肤功能(asp.net2.0)
(转载:http://www.cnblogs.com/aiqingayu/archive/2006/10/26/539833.html)小弟我又来献丑了，不知道放在原创区是否合适，不行就用砖头飞我吧！
写了一年多的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")值咯！
<link id="cssStyle" rel="stylesheet" type="text/css" />
自己定义ID标识，然后用下面的JS代码初始化
若要改变就随便准备几个按钮什么，只要是能直接调用changeCSS(CSSLink)这个方法的都行！（不刷新页面就可以直接看到效果）
预览还是要用Session记录,然后用数据库的字段值初始，判断方法同上。
这个可以用几个按钮调用这个changeSkin(skinNO)方法，直接看到效果。
若要保存就存数据库吧！用window.onload()事件初始。
写了一年多的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" /> 1
<script language="javascript" type="text/javascript">
2
2 <!--
3 3 function window.onload()
4
4 {
5 5 changeCSS('css1.css');//当然'css1.css'是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了
6
6 }
7 7 function changeCSS(CSSLink)
8 8 {
9 9 cssStyle.href=CSSLink;
1010 }
1111 -->
12
12 </script>
<script language="javascript" type="text/javascript">
2
2 <!--3
3 function window.onload()4
4 {
5
5 changeCSS('css1.css');//当然'css1.css'是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了6
6 }7
7 function changeCSS(CSSLink)8
8 {9
9 cssStyle.href=CSSLink;10
10 }11
11 -->12
12 </script>若要改变就随便准备几个按钮什么，只要是能直接调用changeCSS(CSSLink)这个方法的都行！（不刷新页面就可以直接看到效果）
预览还是要用Session记录,然后用数据库的字段值初始，判断方法同上。
3.换模版
这个换起来有一点复杂，先说个比较笨的方法，就是准备不同的模版程序，对文件夹编号，然后通过数据库调用！这个确实很吃力，因为要准备不同的模版，只适用于模块较多和排版做大范围的改变，具体实现也同上，预览时用Session把编号保存起来，普通WEB改变Session后刷新页面，Ajax回调整个页面结构。
如果你的模块较少，而且只是简单的改变几个模块的位置，那就用CSS中的position:absolute;吧！让模块漂浮起来，比如将不同模块嵌在DIV中，用JS改变它们的top与left就能马上实现预览功能，当然这个就需要自己写JS来定位,下面我简单的写了2个模块的换肤。
1 <script language="javascript" type="text/javascript">
2 2 <!--
3 3 function window.onload()
4 4 {
5 5 changeSkin('1');//当然 '1' 是从数据库或Session中读取的初始模版值。
6 6 }
7 7 function setDivTop(divID,topValue)
8 8 {
9 9 document.getElementById(divID).style.top = topValue;
1010 }
1111 function setDivLeft(divID,leftValue)
1212 {
1313 document.getElementById(divID).style.left = leftValue;
1414 }
1515 //这个JS方法就要自己写了，一个一个的将模块定位吧！
1616 function changeSkin(skinNO)
1717 {
1818 switch(skinNO)
1919 {
2020 case"1":
2121 setDivTop('divNews','100px');
2222 setDivLeft('divNews','100px');
2323 setDivTop('divMusic','300px');
2424 setDivLeft('divMusic','300px');
2525 break;
2626 case"2":
2727 setDivTop('divNews','300px');
2828 setDivLeft('divNews','300px');
2929 setDivTop('divMusic','100px');
3030 setDivLeft('divMusic','100px');
3131 break;
3232 }
3333 }
3434 -->
3535 </script>
<script language="javascript" type="text/javascript">2
2 <!--3
3 function window.onload()4
4 {5
5 changeSkin('1');//当然 '1' 是从数据库或Session中读取的初始模版值。6
6 }7
7 function setDivTop(divID,topValue)8
8 {9
9 document.getElementById(divID).style.top = topValue;10
10 }11
11 function setDivLeft(divID,leftValue)12
12 {13
13 document.getElementById(divID).style.left = leftValue;14
14 }15
15 //这个JS方法就要自己写了，一个一个的将模块定位吧！16
16 function changeSkin(skinNO)17
17 {18
18 switch(skinNO)19
19 {20
20 case"1":21
21 setDivTop('divNews','100px');22
22 setDivLeft('divNews','100px');23
23 setDivTop('divMusic','300px');24
24 setDivLeft('divMusic','300px');25
25 break;26
26 case"2":27
27 setDivTop('divNews','300px');28
28 setDivLeft('divNews','300px');29
29 setDivTop('divMusic','100px');30
30 setDivLeft('divMusic','100px');31
31 break;32
32 }33
33 }34
34 -->35
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 2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 3 <head>
4 4 <title>测试</title>
5 5 <link id="cssStyle" rel="stylesheet" type="text/css" />
6 6 <script language="javascript" type="text/javascript">
7 7 <!--
8 8 function window.onload()
9 9 {
1010 //没有做数据库与Session的存储，所以初始值赋固定初始值，具体使用请用数据库与Session存储并初始化。
1111 changeSkin('1');
1212 changeSkin2('1');
1313 changeCSS('css1.css');
1414 }
1515 function setDivTop(divID,topValue)
1616 {
1717 document.getElementById(divID).style.top = topValue;
1818 }
1919 function setDivLeft(divID,leftValue)
2020 {
2121 document.getElementById(divID).style.left = leftValue;
2222 }
2323 //这个JS方法就要自己写了，一个一个的将模块定位吧！
2424 function changeSkin(skinNO)
2525 {
2626 switch(skinNO)
2727 {
2828 case"1":
2929 setDivTop('divWrite','70px');
3030 setDivLeft('divWrite','10px');
3131 setDivTop('divRead','70px');
3232 setDivLeft('divRead','300px');
3333 break;
3434 case"2":
3535 setDivTop('divWrite','70px');
3636 setDivLeft('divWrite','300px');
3737 setDivTop('divRead','70px');
3838 setDivLeft('divRead','10px');
3939 break;
4040 }
4141 }
4242 //这个方法模拟Ajax回调不同的模版,并且模拟更换图片
4343 function changeSkin2(skinNO)
4444 {
4545 switch(skinNO)
4646 {
4747 case"1":
4848 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>";
4949 break;
5050 case"2":
5151 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>";
5252 break;
5353 }
5454 }
5555 function changeCSS(CSSLink)
5656 {
5757 cssStyle.href=CSSLink;
5858 }
5959 -->
6060 </script>
6161 </head>
6262 <body>
6363 <span class="font_12">点击动态改变DIV位置更换模版</span><br />
6464 <input onclick="changeSkin('1');" type="button" value="Skin1" /> <input onclick="changeSkin('2');" type="button" value="Skin2" />
6565 <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>
6666 <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>
6767 <br /><br /><br /><br /><br /><br /><br />
6868 <hr />
6969 <span class="font_12">点击模拟Ajax回调方法更换模版</span><br />
7070 <input onclick="changeSkin2('1');" type="button" value="Skin1" /> <input onclick="changeSkin2('2');" type="button" value="Skin2" />
7171 <div id="divAjax"></div>
7272 <hr />
7373 <span class="font_12">点击更换CSS</span><br />
7474 <input onclick="changeCSS('css1.css')" type="button" value="CSS1" /> <input onclick="changeCSS('css2.css')" type="button" value="CSS2" />
7575 </body>
7676 </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
2 <html xmlns="http://www.w3.org/1999/xhtml" >3
3 <head>4
4 <title>测试</title>5
5 <link id="cssStyle" rel="stylesheet" type="text/css" />6
6 <script language="javascript" type="text/javascript">7
7 <!--8
8 function window.onload()9
9 {10
10 //没有做数据库与Session的存储，所以初始值赋固定初始值，具体使用请用数据库与Session存储并初始化。11
11 changeSkin('1');12
12 changeSkin2('1');13
13 changeCSS('css1.css');14
14 }15
15 function setDivTop(divID,topValue)16
16 {17
17 document.getElementById(divID).style.top = topValue;18
18 }19
19 function setDivLeft(divID,leftValue)20
20 {21
21 document.getElementById(divID).style.left = leftValue;22
22 }23
23 //这个JS方法就要自己写了，一个一个的将模块定位吧！24
24 function changeSkin(skinNO)25
25 {26
26 switch(skinNO)27
27 {28
28 case"1":29
29 setDivTop('divWrite','70px');30
30 setDivLeft('divWrite','10px');31
31 setDivTop('divRead','70px');32
32 setDivLeft('divRead','300px');33
33 break;34
34 case"2":35
35 setDivTop('divWrite','70px');36
36 setDivLeft('divWrite','300px');37
37 setDivTop('divRead','70px');38
38 setDivLeft('divRead','10px');39
39 break;40
40 }41
41 }42
42 //这个方法模拟Ajax回调不同的模版,并且模拟更换图片43
43 function changeSkin2(skinNO)44
44 {45
45 switch(skinNO)46
46 {47
47 case"1":48
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
49 break;50
50 case"2":51
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
52 break;53
53 }54
54 }55
55 function changeCSS(CSSLink)56
56 {57
57 cssStyle.href=CSSLink;58
58 }59
59 -->60
60 </script>61
61 </head>62
62 <body>63
63 <span class="font_12">点击动态改变DIV位置更换模版</span><br />64
64 <input onclick="changeSkin('1');" type="button" value="Skin1" /> <input onclick="changeSkin('2');" type="button" value="Skin2" />65
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
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
67 <br /><br /><br /><br /><br /><br /><br />68
68 <hr />69
69 <span class="font_12">点击模拟Ajax回调方法更换模版</span><br />70
70 <input onclick="changeSkin2('1');" type="button" value="Skin1" /> <input onclick="changeSkin2('2');" type="button" value="Skin2" />71
71 <div id="divAjax"></div>72
72 <hr />73
73 <span class="font_12">点击更换CSS</span><br />74
74 <input onclick="changeCSS('css1.css')" type="button" value="CSS1" /> <input onclick="changeCSS('css2.css')" type="button" value="CSS2" />75
75 </body>76
76 </html>下载:link
http://u.huoban001.com/space.php
