|
从文章的标题上看是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就能马上实现预览功能，当然这个就需要自 |
