繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 网站换肤功能实现代码
- Javascript
- 可实现多表单提交的javascript函数
- 比较详细的关于javascript中void(0)的具体含义解释
- 随机显示经典句子或诗歌的javascript脚本
- javascript实现的多条新闻公告系统
- 解析arp病毒背后利用的Javascript技术附解密方法
- 比较详细的javascript对象的property和prototype是什么一种关系
- 访问百度和谷歌网速测试的javascript代码
- javascript 动态改变层的Z-INDEX的代码style.zIndex
- javascript+css实现单击颜色褪去效果
- javascript 表单日期选择效果
- 比较简单的javascript实现input双击后可以编辑
- javascript实现的颜色块滑动的动态效果
- js实现网页检测是否安装了 Flash Player 插件
- javascript 实现父窗口引用弹出窗口的值的脚本
- javascript 实现双击才能打开链接的方法
- 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
- document.createElement("A")比较不错的属性
- 用javascript实现不按Ctrl实现Multiple Select多选
- JavaScript-世界上误解最深的语言分析
- IE和Mozilla的兼容性汇总event
Javascript 中的 JQuery 网站换肤功能实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 300 ::
收藏到网摘: n/a
我第一次看到样式表切换器是在A List Apart或者Simple Bits，那是两个设计师最应该去的网站。 从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。
我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。
首先，代码
复制代码 代码如下:
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
其他这里没有提到的部分是你将在后面看到的创建和读取cookie的函数。
熟悉的开篇
$(document).ready(function(){ $('.styleswitch').click(function()……告诉jQuery“以最快的速度查找所有包含对象名‘styleswitch'的元素，并在他们被鼠标点击时执行一个函数”。
看起来不错。当鼠标点击预先指定的元素时，switchStylestyle函数将被调用。从现在开始是重点。
这句话什么意思？
第一次看到这句代码的时候我的脑子有些卡壳：
$('link[@rel*=style]').each(function(i) {
在互联网上搜索了一下后我空手而归。最后不得不找到了jQuery的作者John Resig，向他咨询。
他直接给了我一个jQuery网站的页面地址，里面讲解了若干jQuery提供的高级特性(xpath)，可以用来查找并操作页面中的若干元素。
如果你看过这些东西你就能明白上面那句神秘的代码的含义是告诉jQuery“查找所有带rel属性并且属性值字符串中包含‘style'的link链接元素”。
让我们看看如何编写包含一个主样式表，两个备用样式表的页面：
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />我们可以看到所有样式表都含有一个包含‘style'字串的rel属性。
所以结果一目了然，jQuery轻松定位了页面中的样式表链接。
下一步？
each()函数将遍历所有这些样式表链接，并执行下一行中的代码：
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;“首先禁用所有的样式表链接，然后开启任何title属性值与switchStylestyle函数传递过来的字串相同的样式表”
一把抓啊，不过很有效。
现在我们需要保证的是那些样式表存在并且有效。
完整代码和演示
既然 Kelvin Luck已经编写了这些代码，我就不在这里重复了。
DEMO
我相信Kelvin的灵感是从 这个网站那里得到的，我们正好可以看看使用其他工具实现这个功能是否要比jQuery更加复杂冗长。
完整的styleswitch.js
复制代码 代码如下:
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
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=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions
评论 (0) All
