如果要更换页面的主题,只能是放在Page_PreInit事件里,而这个事件一般都要经过刷新才会执行,所以这就导致效率下降,用户体验也会跟着下降。
下面我将介绍一下关于Javascript+CSS的解决办法:
首先建立一个html文件,代码如下:
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 ="theme" href ="red.css" rel ="Stylesheet" type ="text/css" />
6 </ head >
7 < body >
8 < div > 这是页面的文字 </ div >
9 < input id ="btnChangeRedTheme" type ="button" value ="red" />
10 < input id ="btnChangeBlueTheme" type ="button" value ="blue" />
11 </ body >
12 </ html >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 无刷新更改页面样式 </ title >
5 < link id ="theme" href ="red.css" rel ="Stylesheet" type ="text/css" />
6 </ head >
7 < body >
8 < div > 这是页面的文字 </ div >
9 < input id ="btnChangeRedTheme" type ="button" value ="red" />
10 < input id ="btnChangeBlueTheme" type ="button" value ="blue" />
11 </ body >
12 </ html >
接下来就是通过button的单击事件来更改link标签中的href属性了,以下是jQuery代码,用Javascript实现也很简单,由于鄙人热衷于jQuery,所以请大家谅解:)
1
<
script type
=
"
text/javascript
"
>
2 $(document).ready( function (){
3 $( ' #btnChangeRedTheme ' ).click( function (event){$( ' #theme ' ).attr( ' href ' , ' red.css ' );});
4 $( ' #btnChangeBlueTheme ' ).click( function (event){$( ' #theme ' ).attr( ' href ' , ' blue.css ' );});
5 });
6 < / script>
2 $(document).ready( function (){
3 $( ' #btnChangeRedTheme ' ).click( function (event){$( ' #theme ' ).attr( ' href ' , ' red.css ' );});
4 $( ' #btnChangeBlueTheme ' ).click( function (event){$( ' #theme ' ).attr( ' href ' , ' blue.css ' );});
5 });
6 < / script>
就这样大功告成了,很简单吧。
至于blue.css和red.css两个文件怎么写,就发挥您的聪明才智吧!
拓展:
如果您的某个主题里面有很多CSS文件的话,您可以将主题里这些文件的名字都取相同的,然后建立各个主题的文件夹,如blue,red…
要更换主题的话,只要替换掉所有link标签href属性里的文件夹字符串,如href='blue/theme.css',只需将blue替换为red,即href='red/theme.css'。
http://www.cnblogs.com/mapping/archive/2010/10/27/1863052.html