在Ajax程序中实现无刷新换肤功能(asp.net2.0)
生活随笔
收集整理的這篇文章主要介紹了
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
寫了一年多的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?<!--
?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?????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?<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記錄,然后用數據庫的字段值初始，判斷方法同上。
??????從文章的標題上看是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文件進行鏈接。
?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個模塊的換膚。
?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換膚例子 并且附源碼供大家下載！
?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>
源碼下載 changeSkin.rar
??????預覽還是要用Session記錄,然后用數據庫的字段值初始，判斷方法同上。
轉載于:https://www.cnblogs.com/hzuIT/articles/911278.html
總結
以上是生活随笔為你收集整理的在Ajax程序中实现无刷新换肤功能(asp.net2.0)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： petshop4.0 详解之五(PetS
- 下一篇： KBuilderTools小灰熊歌词制作