JQuery 웹사이트 스키닝 기능 구현 code_jquery

그 이후로 나는 방문자가 마우스로 아무 곳이나 클릭하여 스타일시트를 전환할 수 있는 여러 가지 방법을 찾아냈습니다. 하지만 최근에는 jQuery를 사용하여 간단한 코드를 작성하여 구현하는 방법에 대한 튜토리얼을 작성하고 싶습니다.
jQuery 코드에 대한 소개뿐만 아니라 jQuery 라이브러리의 일부 고급 기능도 공개하고 싶기 때문에 전체 프로세스를 단계별로 안내하겠습니다.
먼저 코드를

코드를 복사하세요 코드는 다음과 같습니다.

$ (document).ready (function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false ;
} );
var c = readCookie('style');
if (c) switchStylestyle(c)
});
$( '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()...은 jQuery에 "가능한 한 빨리 포함된 객체를 모두 찾으세요"라고 알려줍니다. 'styleswitch'라는 이름의 요소를 입력하고 마우스로 클릭하면 함수를 실행합니다.
보기 좋게, 미리 지정된 요소를 마우스로 클릭하면 이제부터 해당 요소가 포커스가 됩니다. 🎜> 이 문장은 무엇을 의미하나요?
처음으로 이 코드를 봤을 때 약간 멍했습니다:
$('link[@rel*=style]').each(function(i) {
인터넷으로 검색하다가 결국 빈손으로 올라왔네요. 결국 jQuery를 만든 John Resig를 만나서 상담을 하게 됐어요.
그분이 직접 제게 jQuery 웹사이트의 페이지 주소를 알려주셨는데요. 고급 기능(xpath)을 사용하여 페이지의 여러 요소를 찾아 조작할 수 있습니다.
이런 내용을 보신 분이라면 위의 신비한 코드가 jQuery를 알려주는 의미를 이해하실 것입니다. "rel 속성이 있는 모든 요소와 속성 값 문자열에 'style'이 포함된 링크 요소를 찾습니다."
하나의 기본 스타일 시트와 두 개의 백업 스타일 시트가 포함된 페이지를 작성하는 방법을 살펴보겠습니다.
모든 스타일시트에 'style' 문자열이 포함된 rel 속성이 포함되어 있음을 보면 결과가 한눈에 알 수 있습니다.
다음 단계는 무엇인가요? 이러한 모든 스타일시트 링크를 반복하고 다음에서 코드를 실행합니다. 다음 줄:
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;"첫 번째 테이블 링크를 통해 모든 스타일을 비활성화한 다음 제목 속성이 있는 스타일 시트를 엽니다. value는 switchStylestyle 함수에 의해 전달된 문자열과 동일합니다."
한줌이지만 매우 효과적입니다.
이제 우리가 확인해야 할 것은 해당 스타일시트가 존재하고 유효한지 확인하는 것뿐입니다.
전체 코드 및 데모
Kelvin Luck이 이미 이 코드를 작성했으므로 여기서는 반복하지 않겠습니다.
DEMO
Kelvin은 이 웹사이트에서 영감을 얻었다고 생각하며, 이 기능을 구현하기 위해 다른 도구를 사용하는 것이 jQuery보다 더 복잡하고 장황한지 확인할 수 있습니다.
styleswitch.js 완성




코드 복사

코드는 다음과 같습니다.

/**
* jQuery를 기반으로 구축된 Styleswitch 스타일시트 전환기
* 저작자표시, 동일조건변경허락 라이센스에 따라
* 작성자: 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]'). 각각(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
}); >createCookie('style', styleName, 365)
}
})(jQuery);
// 쿠키 함수 http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if(일)
{
var date = new Date();
date.setTime(date.getTime() (일*24*60*60*1000));
var 만료 = "; 만료=" date.toGMTString();
}
else varexpires = "";
document.cookie = 이름 "="값 만료 "; path=/";
}
function readCookie(name)
{
var nameEQ = name "=";
var ca = document.cookie.split(';');
for(var i=0;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);
}
null을 반환합니다.
}
function eraCookie(이름)
{
createCookie(이름,"",-1);
}
// /쿠키 기능