我第一次看到样式表切换器是在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);
}
$(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
相关推荐
jqurey-1.2.6,页面操作很好的。。推荐一下。。
写了一些jqurey的使用方法,比如给页面控件赋值,清空,获取值等书写格式。
JQurey学习 Jquery特效
jqurey 插件-很好的树和tab效果,有一个simpleTree、mif.tree-v1.1、tabAccordion.zip和jxlib-2.0-beta-6
这是个中文的api,里边的那个js就是 jqurey所用的东西.直接在页面引用它.就可以用jqurey的语法了.看了以后我只能说很强大也很灵活.如果掌握了,对你的项目非常有用
jqurey学习
6小时玩转jquery
这是个应用到struts2.0,freemarker,jqurey的ajax部分做的一个简单的小例子.发现jqurey是个很强大的东西.很好的封装了javascript可以更好的取元素,和做特效.我感觉应该是个算是个插件吧.应用很灵活就引入一个js...
Jqurey 和 Ajax的结合使用,新手学生所用
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 ...
通过HTML css 和Jqurey 建立的漂亮导航网 !
jqurey 实现的弹框,源码,压缩包内带html,js,还有资源文件。希望对正在学js的你们有点帮助。
JQuery可以实现动态网页的效果图
jqurey的所有内容。是学习的好材料,与大家分享。
Intro、选择器、DOM、event、动画、ajax、jqurey ui、jqurey best practice、jqurey to do list
jqurey手机版触屏滑动效果,适配各个浏览器。可以放心使用。
如何使用easyui远程Ajax校验,怎么获取校验后的返回值
jqurey的资源包,包含jquery源码和jquery的中文参考手册
未美化的三级下拉菜单,jQurey动态缓冲效果,这是一个常见的三级下拉导航,动感的三级菜单,鼠标放到菜单上,会滑出对应的二级菜单,放在二级菜单上,会继续滑出三级菜单,简约的动画效果让菜单变得更加大气、灵动,...
鼠标经过显示图片、淘宝分类隐藏显示更多分类效果