`
javatoyou
  • 浏览: 1013202 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

在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文件进行链接。
阅 读代码编辑代码运行效果复制HTML代码保存代码<link id="cssStyle" rel="stylesheet" type="text/css" /><link id="cssStyle" rel="stylesheet" type="text/css" />
自己定义ID标识，然后用下面的JS代码初始化
阅读代码编辑代码运行效果复制HTML代码保存代码<script language="javascript" type="text/javascript">
<!--
function window.onload()
{
changeCSS('css1.css');//当然'css1.css'是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了
}
function changeCSS(CSSLink)
{
cssStyle.href=CSSLink;
}
-->
</script><script language="javascript" type="text/javascript">
<!--
function window.onload()
{
changeCSS('css1.css');//当然'css1.css'是从数据库或Session中读取的初始CSS链接地址。具体实现我就不多说了
}
function changeCSS(CSSLink)
{
cssStyle.href=CSSLink;
}
-->
</script>
若要改变就随便准备几个按钮什么，只要是能直接调用changeCSS(CSSLink)这个方法的都行！（不刷新页面就可以直接看到效果）

预览还是要用Session记录,然后用数据库的字段值初始，判断方法同上。


3.换模版

这个换起来有一点复杂，先说个比较笨的方法，就是准备不同的模版程序，对文件夹编号，然后通过数据库调 用！这个确实很吃力，因为要准备不同的模版，只适用于模块较多和排版做大范围的改变，具体实现也同上，预览时用Session把编号保存起来，普通WEB 改变Session后刷新页面，Ajax回调整个页面结构。

如果你的模块较少，而且只是简单的改变几个模块的位置，那就用CSS中的position: absolute;吧！让模块漂浮起来，比如将不同模块嵌在DIV中，用JS改变它们的top与left就能马上实现预览功能，当然这个就需要自己写JS 来定位,下面我简单的写了2个模块的换肤。
阅读代码编辑代码运行效果复制HTML代码保存代码<script language="javascript" type="text/javascript">
<!--
function window.onload()
{
changeSkin('1');//当然 '1' 是从数据库或Session中读取的初始模版值。
}
function setDivTop(divID,topValue)
{
document.getElementById(divID).style.top = topValue;
}
function setDivLeft(divID,leftValue)
{
document.getElementById(divID).style.left = leftValue;
}
//这个JS方法就要自己写了，一个一个的将模块定位吧！
function changeSkin(skinNO)
{
switch(skinNO)
{
case"1":
setDivTop('divNews','100px');
setDivLeft('divNews','100px');
setDivTop('divMusic','300px');
setDivLeft('divMusic','300px');
break;
case"2":
setDivTop('divNews','300px');
setDivLeft('divNews','300px');
setDivTop('divMusic','100px');
setDivLeft('divMusic','100px');
break;
}
}
-->
</script><script language="javascript" type="text/javascript">
<!--
function window.onload()
{
changeSkin('1');//当然 '1' 是从数据库或Session中读取的初始模版值。
}
function setDivTop(divID,topValue)
{
document.getElementById(divID).style.top = topValue;
}
function setDivLeft(divID,leftValue)
{
document.getElementById(divID).style.left = leftValue;
}
//这个JS方法就要自己写了，一个一个的将模块定位吧！
function changeSkin(skinNO)
{
switch(skinNO)
{
case"1":
setDivTop('divNews','100px');
setDivLeft('divNews','100px');
setDivTop('divMusic','300px');
setDivLeft('divMusic','300px');
break;
case"2":
setDivTop('divNews','300px');
setDivLeft('divNews','300px');
setDivTop('divMusic','100px');
setDivLeft('divMusic','100px');
break;
}
}
-->
</script>
这个可以用几个按钮调用这个changeSkin(skinNO)方法，直接看到效果。
若要保存就存数据库吧！用window.onload()事件初始。

就写到这里了，马马乎乎，丢砖吧！

下面提供了几个Ajax换肤例子 并且附源码供大家下载！
阅读代码编辑代码运行效果复制 HTML代码保存代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>测试</title>
<link id="cssStyle" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function window.onload()
{
//没有做数据库与Session的存储，所以初始值赋固定初始值，具体使用请用数据库与Session存储并初始化。
changeSkin('1');
changeSkin2('1');
changeCSS('css1.css');
}
function setDivTop(divID,topValue)
{
document.getElementById(divID).style.top = topValue;
}
function setDivLeft(divID,leftValue)
{
document.getElementById(divID).style.left = leftValue;
}
//这个JS方法就要自己写了，一个一个的将模块定位吧！
function changeSkin(skinNO)
{
switch(skinNO)
{
case"1":
setDivTop('divWrite','70px');
setDivLeft('divWrite','10px');
setDivTop('divRead','70px');
setDivLeft('divRead','300px');
break;
case"2":
setDivTop('divWrite','70px');
setDivLeft('divWrite','300px');
setDivTop('divRead','70px');
setDivLeft('divRead','10px');
break;
}
}
//这个方法模拟Ajax回调不同的模版,并且模拟更换图片
function changeSkin2(skinNO)
{
switch(skinNO)
{
case"1":
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>";
break;
case"2":
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>";
break;
}
}
function changeCSS(CSSLink)
{
cssStyle.href=CSSLink;
}
-->
</script>
</head>
<body>
<span class="font_12">点击动态改变DIV位置更换模版</span><br />
<input onclick="changeSkin('1');" type="button" value="Skin1" /> <input onclick="changeSkin('2');" type="button" value="Skin2" />
<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>
<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>
<br /><br /><br /><br /><br /><br /><br />
<hr />
<span class="font_12">点击模拟Ajax回调方法更换模版</span><br />
<input onclick="changeSkin2('1');" type="button" value="Skin1" /> <input onclick="changeSkin2('2');" type="button" value="Skin2" />
<div id="divAjax"></div>
<hr />
<span class="font_12">点击更换CSS</span><br />
<input onclick="changeCSS('css1.css')" type="button" value="CSS1" /> <input onclick="changeCSS('css2.css')" type="button" value="CSS2" />
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>测试</title>
<link id="cssStyle" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function window.onload()
{
//没有做数据库与Session的存储，所以初始值赋固定初始值，具体使用请用数据库与Session存储并初始化。
changeSkin('1');
changeSkin2('1');
changeCSS('css1.css');
}
function setDivTop(divID,topValue)
{
document.getElementById(divID).style.top = topValue;
}
function setDivLeft(divID,leftValue)
{
document.getElementById(divID).style.left = leftValue;
}
//这个JS方法就要自己写了，一个一个的将模块定位吧！
function changeSkin(skinNO)
{
switch(skinNO)
{
case"1":
setDivTop('divWrite','70px');
setDivLeft('divWrite','10px');
setDivTop('divRead','70px');
setDivLeft('divRead','300px');
break;
case"2":
setDivTop('divWrite','70px');
setDivLeft('divWrite','300px');
setDivTop('divRead','70px');
setDivLeft('divRead','10px');
break;
}
}
//这个方法模拟Ajax回调不同的模版,并且模拟更换图片
function changeSkin2(skinNO)
{
switch(skinNO)
{
case"1":
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>";
break;
case"2":
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>";
break;
}
}
function changeCSS(CSSLink)
{
cssStyle.href=CSSLink;
}
-->
</script>
</head>
<body>
<span class="font_12">点击动态改变DIV位置更换模版</span><br />
<input onclick="changeSkin('1');" type="button" value="Skin1" /> <input onclick="changeSkin('2');" type="button" value="Skin2" />
<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>
<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>
<br /><br /><br /><br /><br /><br /><br />
<hr />
<span class="font_12">点击模拟Ajax回调方法更换模版</span><br />
<input onclick="changeSkin2('1');" type="button" value="Skin1" /> <input onclick="changeSkin2('2');" type="button" value="Skin2" />
<div id="divAjax"></div>
<hr />
<span class="font_12">点击更换CSS</span><br />
<input onclick="changeCSS('css1.css')" type="button" value="CSS1" /> <input onclick="changeCSS('css2.css')" type="button" value="CSS2" />
</body>
</html>

源码下载
http://files.cnblogs.com/aiqingayu/changeskin.rar

分享到：
| DELPHI中回调函数的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取最新的RSS内容，而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js ...

    23blog v1.080709.rar

    无刷新动态换肤，并支持自定义皮肤样式 系统暂时支持ie7、firefox 、maxthon、腾讯tt、theworld几款浏览器，ie6有些小问题（主要是ie6自身bug） v1.080709更新记录： 重写后台页面结构，改进了后台一些功能 ...

    asp.net知识库

    XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上，会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,...

    asp.net博客系统

    无刷新动态换肤，并支持自定义皮肤样式 系统暂时支持ie7、firefox+、maxthon、腾讯tt、theworld几款浏览器，ie6有些小问题（主要是ie6自身bug） v1.080709更新记录： 重写后台页面结构，改进了后台一些功能 ...

    最好的asp CMS系统科讯CMSV7.0全功能SQL商业版，KesionCMS V7.0最新商业全能版-免费下载

    19、独创标签AJAX输出，采用无刷新ajax分页技术，不仅栏目生成速度大大提高，还有效的防止列表被采集，标签可支持ajax-&gt;table,ajax-&gt;div+css,table,div+css四种调用方式，独创标签导入导出功能，让您更方便标签的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...

    asprain论坛Access版 v1.0 build 20100228

    在asprain论坛的在线编辑器中，可以做到一键插入本地图片、一键完成远程图片上传、轻松插入优酷网等视频网站上的的视频地址、插入回复可读、付费可读等标记，还可以插入程序代码。asprain论坛使用了改进版的chili...

    .net开源的综合开发框架wojilu框架.zip

    极高的灵活性，除了网站频道，还可以在群组和个人空间中使用门户功能；和 SNS 无缝集成，所有评论都会第一时间将提醒发送给管理员；支持通用评论；支持在线采集和导入，使用简单；支持社会化分享。特别介绍：论坛...

    jeesite后台框架

    无刷新设计，除了进入功能页面和新页面，其它情况下全部采用Ajax交互，优化体验和性能。 支持一件换肤，只需在properties里修改下主题名称即可快速切换整个UI的风格，不仅仅是色调和样式，布局也可改变。支持自定义...

    Asprain 1.3 Access

    在asprain论坛的在线编辑器中，可以做到一键插入本地图片、一键完成远程图片上传、轻松插入优酷网等视频网站上的的视频地址、插入回复可读、付费可读等标记，还可以插入程序代码。asprain论坛使用了改进版的chili...

    Asprain 1.3 SQL

    在asprain论坛的在线编辑器中，可以做到一键插入本地图片、一键完成远程图片上传、轻松插入优酷网等视频网站上的的视频地址、插入回复可读、付费可读等标记，还可以插入程序代码。asprain论坛使用了改进版的chili...

Magicbox
Global site tag (gtag.js) - Google Analytics