>웹 프론트엔드 >JS 튜토리얼 >jquery 쿠키로 구현된 간단한 스킨 변경 기능은 소규모 웹사이트에 적합합니다_jquery

jquery 쿠키로 구현된 간단한 스킨 변경 기능은 소규모 웹사이트에 적합합니다_jquery

WBOY
WBOY원래의
2016-05-16 17:24:16765검색

얼마 전 jquery 쿠키를 사용하려고 했을 때 간단한 스킨 변경 기능을 만들었는데, 이는 소규모 웹사이트에만 적합하고 코드도 로우 레벨이었습니다.

먼저 jquery와 쿠키 플러그인 소개

코드 복사 코드는 다음과 같습니다




여러 CSS 파일 준비
코드 복사 코드는 다음과 같습니다.



웹 페이지 본문 부분에 jquery를 실행할 여러 개의 버튼을 준비합니다
코드 복사 코드는 다음과 같습니다.



jquery 코드
코드 복사 코드는 다음과 같습니다.

$(document).ready(function(){
$("#button1").click(
function(){
$.cookie('cssfile','basic2.css');//쿠키 저장
location.reload(); //페이지 새로 고침
}
)
$("#button2").click(
function(){
$.cookie('cssfile','basic.css' );
location.reload();
}
);
})
$(document).ready(
function(){
var file=$ .cookie('cssfile'); //쿠키 읽기
if(typeof file=="undefine")
{
var cssfile="__PUBLIC__/css/basic2.css" //설정 없음, 기본 CSS 읽기
}
else
{
var cssfile="__PUBLIC__/css/" file; //쿠키 설정
}
$("#f").attr( "href",cssfile);
}
);

jquery 쿠키 플러그인을 얻으려면 클릭하세요
jquery를 얻으려면 클릭하세요또는 Google이나 Microsoft에서 호스팅하는 jquery를 사용하세요.
Microsoft CDN:
------------------------------- ----------------- --------------------------------- ----
코드 복사 코드는 다음과 같습니다.



Google CDN:
---- ------- ----------------- ------- -----
코드 복사 코드는 다음과 같습니다.