脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JQuery 前台切换

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

 更新时间：2009年06月22日 13:22:42   作者：  
本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要，因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。
但如果你想为网站添加多一些样式，让访客选择；又或者你想调整一下网站的样式，而在决定前让访客先体现的话，这也是一个很好的办法，省去总是切换主题的痛苦。
切换效果参照本站。
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);
}

到此，完成上面三部后就可以了，希望大家看得明白。

相关文章

  • js之input[type=file]选择重复的文件,无法触发change事件问题

    js之input[type=file]选择重复的文件,无法触发change事件问题

    这篇文章主要介绍了js之input[type=file]选择重复的文件,无法触发change事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • OpenLayer3自定义测量控件MeasureTool

    OpenLayer3自定义测量控件MeasureTool

    这篇文章主要为大家详细介绍了OpenLayer3自定义测量控件MeasureTool，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript JSON使用原理及注意事项

    JavaScript JSON使用原理及注意事项

    这篇文章主要介绍了JavaScript JSON使用原理及注意事项,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS中的Error对象及使用JSON.stringify()序列化Error问题

    JS中的Error对象及使用JSON.stringify()序列化Error问题

    这篇文章主要介绍了JS中的Error对象及使用JSON.stringify()序列化Error问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • js导出Excel表格超出26位英文字符的解决方法ES6

    js导出Excel表格超出26位英文字符的解决方法ES6

    下面小编就为大家带来一篇js导出Excel表格超出26位英文字符的解决方法ES6。具有很好的参考价值。一起跟随小编过来看看吧，希望对大家有所帮助
    2017-11-11
  • 原生javascript如何实现共享onload事件

    原生javascript如何实现共享onload事件

    这篇文章主要介绍了原生javascript如何实现共享onload事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Bootstrap 实现查询的完美方法

    Bootstrap 实现查询的完美方法

    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。这篇文章主要介绍了Bootstrap 实现查询的完美方法,需要的朋友可以参考下
    2016-10-10
  • javascript:void(0)用法及常见问题分析

    javascript:void(0)用法及常见问题分析

    javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法，然后再来看使用它会出现什么问题，该怎么解决，感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • JS 事件机制完整示例分析

    JS 事件机制完整示例分析

    这篇文章主要介绍了JS 事件机制,结合完整实例形式分析了JavaScript事件响应机制、原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • JS表的模拟方法

    JS表的模拟方法

    这篇文章主要介绍了JS表的模拟方法,涉及javascript模拟表的生成、添加与删除节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论