写了一年多的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>

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>

这个可以用几个按钮调用这个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" />&nbsp;&nbsp;<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" />&nbsp;&nbsp;<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" />&nbsp;&nbsp;<input onclick="changeCSS('css2.css')" type="button" value="CSS2" />
75 </body>
76 </html>

源码下载 changeSkin.rar

http://www.cnblogs.com/aiqingayu/archive/2006/10/26/539833.aspx若要改变就随便准备几个按钮什么，只要是能直接调用changeCSS(CSSLink)这个方法的都行！（不刷新页面就可以直接看到效果）
      预览还是要用Session记录,然后用数据库的字段值初始，判断方法同上。

转载于:https://www.cnblogs.com/hzuIT/articles/911278.html

在Ajax程序中实现无刷新换肤功能(asp.net2.0)相关推荐

  1. 在.NET 2.0正式版中开发无刷新页面

    在已经发布的 ASP.NET2.0 中,无刷新页面开发相关部分同 beta2 有不少改动.而且在越来越多的 Ajax 开发包被开发出来的情况下, ASP.NET2.0 自带的无刷新页面技术没有被很多人 ...

  2. ASP.NET2.0 开发无刷新页面

    ASP.NET2. 0  开发无刷新页面 在已经发布的 ASP.NET2. 0  中,越来越多的 Ajax 开发包被开发出来的情况下, ASP.NET2. 0  自带的无刷新页面技术没有被很多人了解, ...

  3. 揭秘换肤技术：实现系统滚动条换肤功能

    对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如Edit.ListBox.ListView.TreeView等自带的系统滚动条,要想实现其自定义的皮 ...

  4. 实现系统滚动条换肤功能

    对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如Edit.ListBox.ListView.TreeView等自带的系统滚动条,要想实现其自定义的皮 ...

  5. android 换肤 字体颜色,android使用SkinManager实现换肤功能的示例

    试着用鸿洋大神写的SkinManager实现了换肤功能. 一.配置 在app下build.gradle中添加依赖: //换肤功能 compile 'com.zhy:changeskin:4.0.2' ...

  6. jsp 页面刷新_如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询

    软件项目实训及课程设计指导--如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例 1.在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp (1)创建 ...

  7. php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法

    1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...

  8. Ajax弹出式无刷新城市选择特效

    为什么80%的码农都做不了架构师?>>>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  9. zan php demo,ajax+php+mysql实现无刷新点赞功能

    从动态图看出来,点击赞的按钮的时候,旁边的赞数量在无刷新地增加.打开数据库也能看到赞数量更新了. 原理就是通过ajax异步提交数据给数据库. 首先前端页面就是一个按钮和赞数量. 数据库名,test,表 ...

最新文章

  1. logcat错误日志
  2. Android java 多线程（三）
  3. 爬虫基础, 乱码问题, jupyter, urllib, requests, lxml, multiprocessing并发, session, beautifulsoup...
  4. SqlHelper数据库访问类
  5. mahout贝叶斯算法开发思路（拓展篇）1
  6. 分布式系统：一致性模型
  7. H3C DHCP特点
  8. VisualBox 克隆CentOS 7.6 后，ip，源，禁止root远程登录，主机，防火墙，ssh密钥登录
  9. struts1:Struts的中央控制器
  10. linux基础及网新运维,Linux运维工程师常用到的Linux基础命令(一)
  11. Java实现校园论坛系统
  12. 【疫情防控毕业设计源码】精品微信小程序社区疫情防控+后台管理系统|前后分离VUE[包运行成功]
  13. 工程力学和计算机专业,2018工程力学专业就业方向及就业前景分析
  14. AI燃到爆！中关村人工智能产业论坛十位大咖演讲干货
  15. Jetson TK1 刷机安装Ubuntu系统与Mini PCI-e无线网卡
  16. 速学TypeScript-精简划重点手册-下册
  17. 用Moment.js 计算两个时间直接的间隔
  18. 学会python爬虫，这简直就是二次元宅男的福利
  19. Yocto系列讲解[理论篇]23 - BitBake全过程(1)
  20. 如何通过外网(互联网)访问本地计算机里的网站？Ngrok(内网穿透)帮你解决！

热门文章

  1. 深入理解javascript原型和闭包
  2. django中怎样生成非HTML格式的内容。
  3. DVWA系列之24 high级别上传漏洞
  4. 大文件及文件夹上传（续）
  5. python在运维自动化的前景_现在学运维自动化python和大数据?
  6. activemq 发两条只收到一条_浅谈ActiveMQ与使用
  7. 如何彻底卸载MySQL
  8. 业务id转密文短链的一种实现思路
  9. 扫描PDF417崩溃的原因找到：手机摄像头分辨率低
  10. EntityFramework6.X 之 Fulent