JQuery第7天:样式表切换

我第一次看到样式表切换器是在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]').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更加复杂冗长。

taxonomy: