快捷導(dǎo)航

JQuery 網(wǎng)站換膚功能實(shí)現(xiàn)代碼

更新時(shí)間：2009年11月02日 02:12:55 作者：

我第一次看到樣式表切換器是在A List Apart或者Simple Bits，那是兩個(gè)設(shè)計(jì)師最應(yīng)該去的網(wǎng)站。

從那以后，我找到了很多可以讓訪客通過鼠標(biāo)點(diǎn)擊某個(gè)地方切換樣式表的方法。但最近我要寫一篇如何使用jQuery編寫簡單代碼實(shí)現(xiàn)它的教程。
我將向你們逐步解說整個(gè)的過程，不僅僅因?yàn)橐故緅Query代碼的簡介，同時(shí)也要揭示jQuery庫中的若干高級特性。
首先，代碼

復(fù)制代碼代碼如下:

 
$(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); 
} 

其他這里沒有提到的部分是你將在后面看到的創(chuàng)建和讀取cookie的函數(shù)。
熟悉的開篇

$(document).ready(function(){ $('.styleswitch').click(function()……告訴jQuery“以最快的速度查找所有包含對象名‘styleswitch'的元素，并在他們被鼠標(biāo)點(diǎn)擊時(shí)執(zhí)行一個(gè)函數(shù)”。
看起來不錯(cuò)。當(dāng)鼠標(biāo)點(diǎn)擊預(yù)先指定的元素時(shí)，switchStylestyle函數(shù)將被調(diào)用。從現(xiàn)在開始是重點(diǎn)。
這句話什么意思？
第一次看到這句代碼的時(shí)候我的腦子有些卡殼：
$('link[@rel*=style]').each(function(i) {
在互聯(lián)網(wǎng)上搜索了一下后我空手而歸。最后不得不找到了jQuery的作者John Resig，向他咨詢。
他直接給了我一個(gè)jQuery網(wǎng)站的頁面地址，里面講解了若干jQuery提供的高級特性(xpath)，可以用來查找并操作頁面中的若干元素。
如果你看過這些東西你就能明白上面那句神秘的代碼的含義是告訴jQuery“查找所有帶rel屬性并且屬性值字符串中包含‘style'的link鏈接元素”。
讓我們看看如何編寫包含一個(gè)主樣式表，兩個(gè)備用樣式表的頁面：
<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" />我們可以看到所有樣式表都含有一個(gè)包含‘style'字串的rel屬性。
所以結(jié)果一目了然，jQuery輕松定位了頁面中的樣式表鏈接。
下一步？
each()函數(shù)將遍歷所有這些樣式表鏈接，并執(zhí)行下一行中的代碼：
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;“首先禁用所有的樣式表鏈接，然后開啟任何title屬性值與switchStylestyle函數(shù)傳遞過來的字串相同的樣式表”
一把抓啊，不過很有效。
現(xiàn)在我們需要保證的是那些樣式表存在并且有效。
完整代碼和演示
既然 Kelvin Luck已經(jīng)編寫了這些代碼，我就不在這里重復(fù)了。
DEMO
我相信Kelvin的靈感是從這個(gè)網(wǎng)站那里得到的，我們正好可以看看使用其他工具實(shí)現(xiàn)這個(gè)功能是否要比jQuery更加復(fù)雜冗長。
完整的styleswitch.js

復(fù)制代碼代碼如下:

 
/** 
* 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 