您的位置：首页 > 编程语言 > ASP

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

2007-07-13 21:34 609 查看

(转载: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")值咯！
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 2 
3535 </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" />
661 </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>
下载:link

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航