JQuery 前台切换网站的样式实现


Posted in Javascript onJune 22, 2009

但如果你想为网站添加多一些样式,让访客选择;又或者你想调整一下网站的样式,而在决定前让访客先体现的话,这也是一个很好的办法,省去总是切换主题的痛苦。
切换效果参照本站。
1. 切换样式的按钮代码:

<div id="style-switch"> 
<ul> 
<li><a href="#?style=white" rel="white" class="styleswitch white">Day</a></li> 
<li><a href="#?style=black" rel="black" class="styleswitch black">Night</a></li> 
</ul> 
</div>

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。
2. 样式引用代码:
<?php if($_COOKIE['style'] == 'black') : ?> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" /> 
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" /> 
<?php else : ?> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" /> 
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" /> 
<?php endif; ?>

在这里我简单说明一下:
因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”,所以在这里我会让浏览器根据记录进行样式的调用(这里为两个样式,一个“white”,另一个“black”)。
当浏览器存在“style”的cookie记录,并记录为“black”时候,则先读取black.css文件,这可以说是主样式文件;及后再读取辅助样式(就是供需要切换的样式),white.css。
如果浏览器没有任何“style”的样式cookie记录,或者“style”的样式cookie记录为“white”时候,则主题先读取white.css文件,再读取black.css文件。
在这里需要补充的是,使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作,但由于js的加载还是需要那么一点时间,所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后,再浏览页面,会出现先是一瞬间的白色主题,然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。
3. Javascript部分代码:(注意前提是你已经在网站中调用了JQuery库)
(function($) 
{ 
$(document).ready(function() { 
$('.styleswitch').click(function() { 
$('body').append('<div id="overlay" />'); 
$('#overlay') 
.css({ 
display: 'none', 
position: 'absolute', 
top:0, 
left: 0, 
width: '100%', 
height: '2000%', 
zIndex: 1000, 
background: 'black' 
}) 
.fadeIn(500); 
switchStylestyle(this.getAttribute("rel")); 
$('#overlay').fadeOut(500); 
return false; 
}); 
}); 
function switchStylestyle(styleName) 
{setTimeout(function() { 
$('link[@rel*=style][title]').each(function(i) 
{ 
this.disabled = true; 
if (this.getAttribute('title') == styleName) this.disabled = false; 
});}, 500); 
createCookie('style', styleName, 365); 
} 
})(jQuery);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果,这样会比突然的切换来得更为自然。
然后还需要添加产生cookie记录的功能代码:
function createCookie(name,value,days) 
{ 
if (days) 
{ 
var date = new Date(); 
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = "; expires="+date.toGMTString(); 
} 
else var expires = ""; 
document.cookie = name+"="+value+expires+"; path=/"; 
}

还有添加删除cookie记录的功能代码:
function eraseCookie(name) 
{ 
createCookie(name,"",-1); 
}

到此,完成上面三部后就可以了,希望大家看得明白。
Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
web 页面分页打印的实现
Jun 22 #Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 #Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 #Javascript
js 单引号 传递方法
Jun 22 #Javascript
使弱类型的语言JavaScript变强势
Jun 22 #Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 #Javascript
You might like
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php接口隔离原则实例分析
2019/11/11 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
谈谈Python中的while循环语句
2019/03/10 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
商务邀请函范文
2014/01/14 职场文书
爱心倡议书范文
2014/05/12 职场文书
工作检讨书怎么写
2014/10/10 职场文书
个人政治思想总结
2015/03/05 职场文书
家长意见书
2015/06/04 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android