>

的网站换肤功能代码,网站换肤功能实现代码_

- 编辑:澳门新葡亰平台游戏 -

的网站换肤功能代码,网站换肤功能实现代码_

从那以往,笔者找到了成都百货上千方可让访客通过鼠标点击有些地点切换样式表的艺术。但前段时间自身要写风华正茂篇怎样使用jQuery编写简单代码完结它的科目。 作者将向你们稳步解说整个的进度,不止因为要来得jQuery代码的简要介绍,同时也要公布jQuery库中的若干高级本性。 首先,代码 复制代码 代码如下: $.ready { $.click { switchStylestyle(this.getAttribute; return false; }); var c = readCookie switchStylestyle; function switchStylestyle { $('link[@rel*=style][title]').each { this.disabled = true; if (this.getAttribute == styleName) this.disabled = false; }); create库克ie('style', styleName, 365); } 别的这里未有关联的部分是你将要前边见到的创导和读取cookie的函数。 熟练的开张 $.ready{ $.click……告诉jQuery“以最快的速度查找全体包蕴对象名‘styleswitch'的要素,并在他们被鼠标点击时实行三个函数”。 看起来不错。当鼠标点击预先钦定的因素时,switchStylestyle函数将被调用。从几近期起来是根本。 那句话怎么看头? 第三回拜访那句代码的时候自己的脑子有个别卡壳: $.each { 在互连网络寻找了须臾间后本人赤手而归。最终只好找到了jQuery的笔者JohnResig,向他发问。 他直接给了本身多个jQuery网站的页面地址,里面批注了好些个jQuery提供的高级级特性,可以用来查究并操作页面中的若干因素。 就算你看过那一个东西你就能够清楚上边那句神秘的代码的含义是告诉jQuery“查找全体带rel属性并且属性值字符串中带有‘style'的link链接元素”。 让大家看看怎样编写满含一个主样式表,八个备用样式表的页面: 大家能够看看全体样式表都含有叁个带有‘style'字串的rel属性。 所以结果可想而知,jQuery轻易定位了页面中的样式表链接。 下一步? each()函数将遍历全体这一个样式表链接,并实践下生龙活虎行中的代码: this.disabled = true;if (this.getAttribute == styleName) this.disabled = false;“首先禁止使用全部的样式表链接,然后张开任何title属性值与switchStylestyle函数字传送递过来的字串相符的样式表” 生龙活虎把抓啊,然则很平价。 未来大家供给保证的是那二个体制表存在并且有效。 完整代码和演示 既然 凯尔文 Luck已经编写制定了那几个代码,作者就不在那再度了。 DEMO 笔者深信凯尔文的灵感是从 这些网址这里获取的,我们正好能够看看使用其余工具达成那么些效果是不是要比jQuery特别头眼昏花冗长。 完整的styleswitch.js 复制代码 代码如下: /** * Styleswitch stylesheet switcher built on jQuery * Under an Attribution, Share Alike License * By Kelvin Luck ( ) **/ { $.ready { $.click { switchStylestyle(this.getAttribute; return false; }); var c = readCookie switchStylestyle; function switchStylestyle { $('link[@rel*=style][title]').each { this.disabled = true; if (this.getAttribute == styleName) this.disabled = false; }); createCookie('style', styleName, 365); } }); // cookie functions function createCookie { if { var date = new Date(); date.setTime+; var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie { var nameEQ = name + "="; var ca = document.cookie.split; for(var i=0;i < ca.length;i++) { var c = ca[i]; while c = c.substring; if == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie { createCookie; } // /cookie functions

本身首先次看见样式表切换器是在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的笔者JohnResig,向他咨询。

他直接给了自己一个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函数字传送递过来的字串相通的样式表”

意气风发把抓啊,但是很得力。

当今大家须要保障的是那么些体制表存在而且有效。

全部代码和演示

既然如此 凯尔文 Luck已经编写制定了那几个代码,小编就不在此再次了。

DEMO

本身百依百顺凯尔文的灵感是从 那一个网址这里得到的,大家恰恰能够看看使用其余工具完毕那一个意义是不是要比jQuery特别复杂冗长。

完整的styleswitch.js

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( )
**/

(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
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

List Apart或然Simple Bits,那是多少个设计员最应该去的网址。从那未来,作者找到了累累方可让访客通过鼠标点击...

本文由服务器发布,转载请注明来源:的网站换肤功能代码,网站换肤功能实现代码_