快速业务通道

在Ajax程序中实现无刷新换肤功能(.net2.0)

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-04-11

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号