JQuery 사이트 스킨 케 어 기능 구현 코드

그 후 로 나 는 방문객 들 이 마 우 스 를 통 해 어 딘 가 를 클릭 하여 스타일 시트 를 전환 할 수 있 는 방법 을 많이 찾 았 다.하지만 최근 에 나 는 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); 
} 

여기 서 언급 되 지 않 은 부분 은 뒤에서 볼 수 있 는 쿠키 를 만 들 고 읽 는 함수 입 니 다.익숙 한 시작$(document).ready(function(){$('styleswitch').click(function().좋아 보인다.미리 지정 한 요 소 를 마우스 로 클릭 하면 switch Stylestyle 함수 가 호출 됩 니 다.이제부터 가 포인트 야.이 말 은 무슨 뜻 입 니까?이 코드 를 처음 봤 을 때 내 머리 가 좀 막 혔 다.$('link[@rel*=style]').each(function(i){인터넷 에서 검색 한 후에 나 는 빈손으로 돌 아 왔 다.결국 jQuery 의 저자 John Resig 를 찾 아 상담 해 야 했다.그 는 나 에 게 jQuery 사이트 의 페이지 주 소 를 직접 주 었 다.그 안에 jQuery 가 제공 하 는 고급 특성(xpath)을 설명 하여 페이지 의 몇 가지 요 소 를 찾 고 조작 할 수 있다.이 물건 들 을 보면 위의 신비 한 코드 의 의 미 는 jQuery 에 게"모든 rel 속성 과 속성 값 문자열 에'style'이 포 함 된 링크 요 소 를 찾 습 니 다"라 고 말 하 는 것 임 을 알 수 있 습 니 다.메 인 스타일 시트 를 포함 하 는 방법 을 보 여 줍 니 다.두 개의 예비 스타일 시트 의 페이지:우 리 는 볼 수 있 습 니 다.스타일 시트 에는'style'문자열 을 포함 하 는 rel 속성 이 있 습 니 다.그래서 결 과 는 한눈 에 알 수 있 었 고 jQuery 는 페이지 의 스타일 시트 링크 를 쉽게 찾 았 다.다음 단계?each()함 수 는 이 스타일 시트 링크 를 모두 옮 겨 다 니 며 다음 줄 의 코드 를 실행 합 니 다:this.disabled=true;if (this.getAttribute('title') == styleName) this.disabled = false;“우선 모든 스타일 시트 링크 를 사용 하지 않 고 title 속성 값 을 switch Stylestyle 함수 가 전달 하 는 문자열 과 같은 스타일 시트 를 엽 니 다.지금 우리 가 보증 해 야 할 것 은 그 스타일 시트 들 이 존재 하고 유효 하 다 는 것 이다.전체 코드 와 프 리 젠 테 이 션 은 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