基于 JQuery 的网站换肤成果代码
发布时间：2018-08-20 09:15:32 所属栏目：业界 来源：站长网
导读：我第一次看到样式表切换器是在A List Apart可能Simple Bits，那是两个计划师最应该去的网站。从那往后，我找到了许多可以让访客通过鼠标点击某个处所切换样式表的要领。但最近我要写一篇怎样 行使 jQuery 编写简朴代码实现它的教程。 我将向你们慢慢讲解整
|
我第一次看到样式表切换器是在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 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
