jQuery 비새로고침 전환 테마 스킨 예제 explain_jquery

테마 스킨 전환 기능은 많은 웹사이트와 시스템에서 사용됩니다. 사용자는 이 기능에 따라 원하는 테마 색상 스타일을 설정할 수 있어 사용자 경험이 향상됩니다. 이 기사에서는 jQuery를 사용하여 새로 고침 없이 한 번의 클릭으로 테마 스킨을 전환하는 기능을 구현하는 방법에 중점을 둘 것입니다.

이 기능을 구현하는 원리는 정의된 테마 스타일을 클릭하여 페이지에서 현재 참조하는 테마 CSS 파일을 변경하고, 다음 번에 사용자가 다시 방문할 수 있도록 현재 테마 스타일을 쿠키나 데이터베이스에 기록하는 것입니다. 페이지라고 불리는 것은 지난번에 설정한 테마 스타일입니다.
테마 스킨 스타일을 준비하세요
먼저 3가지 스타일의 테마 스킨인 스타일 시트 CSS 파일 3개를 준비하여 페이지에 도입하고 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> 
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> 
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" /> 

목적상 각 2cdf5bf648cf2f33323966d7f58a7f3f에 제목 속성을 추가했으며, 두 번째 및 세 번째 CSS 파일을 비활성화했습니다. 즉, 첫 번째 CSS 파일이 기본적으로 적용됩니다.
XHTML

<ul id="styles"> 
 <li id="default">经典</li> 
 <li id="blue">淡蓝</li> 
 <li id="brown">棕色</li> 
</ul> 

클릭 전환에는 세 가지 테마 스타일이 사용됩니다. 각 li에 별도로 id 속성을 추가했습니다.
CSS

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; 
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} 
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); 
background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color:#162934;} 
ul#styles li#blue{background-color:#90c5e7} 
ul#styles li#brown{background-color:#601f00} 

CSS를 사용하여 XHTML을 렌더링합니다. 여기서 ul#styles li.cur는 현재 선택된 테마 아래의 스타일을 나타냅니다. 저는 현재 선택된 테마를 나타내기 위해 작은 확인 표시를 사용합니다.
제이큐리
먼저 jquery 라이브러리와 jquery.cookie 플러그인을 소개해야 합니다. jquery.cookie 플러그인은 jQuery를 위한 강력한 쿠키 작업 기능을 제공합니다. 복잡한 기본 자바스크립트를 작성할 필요 없이 플러그인을 직접 호출하기만 하면 됩니다. 이 플러그인의 사용에 대해서는 이 사이트의 기사를 읽어보시기 바랍니다:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

다음으로, 사용자가 테마를 선택하기 위해 클릭하면 다음 작업이 발생합니다. 선택한 테마(id)를 가져오고, 참조된 CSS 파일을 확인하고, 제목 속성 값이 정확히 일치하는 것으로 확인되면 현재 선택된 테마 ID 값을 지정한 다음 테마 CSS 파일을 적용하고, 참조된 다른 CSS 파일을 비활성화하고, 현재 선택된 테마를 쿠키에 쓰고, 쿠키 만료 시간을 설정하고, 마지막으로 현재 선택된 테마 버튼(li)을 현재 선택된 항목으로 설정합니다. 상태. 자세한 내용은 아래 코드를 참조하세요.

$("#styles li").click(function(){ 
 var style = $(this).attr("id"); 
 $("link[title='"+style+"']").removeAttr("disabled"); 
 $("link[title!='"+style+"']").attr("disabled","disabled"); 
 $.cookie("mystyle",style,{expires:30}); 
 $(this).addClass("cur").siblings().removeClass("cur"); 
}); 

이 예에서는 선택한 스타일을 사용자 쿠키에 저장합니다. 쿠키 이름은 "mystyle"이고 값은 현재 선택한 테마 값이며 지난 시간은 30일입니다. 즉, 만료:30
다음으로 해야 할 일은 페이지가 로드될 때 테마 쿠키 값을 읽는 것입니다. 테마 쿠키가 있으면 쿠키 값에 해당하는 테마 스타일 CSS 파일을 호출하고 현재 테마 버튼 상태를 선택 상태로 설정합니다. 기본 스타일을 호출합니다. 코드는 다음과 같습니다.

var cookie_style = $.cookie("mystyle"); 
if(cookie_style==null){ 
 $("link[title='default']").removeAttr("disabled"); 
 $("#styles li#default").addClass("cur"); 
}else{ 
 $("link[title='"+cookie_style+"']").removeAttr("disabled"); 
 $("#styles li[id='"+cookie_style+"']").addClass("cur"); 
 $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); 
} 

위의 두 코드를 $(function(){})에 추가하면 작업이 완료됩니다.
본 글에서 사용된 쿠키는 사용자가 선택한 테마 스킨 스타일을 기록하지만 쿠키가 만료되거나 사용자가 브라우저의 COOKIE를 삭제하거나 사용자가 탐색을 위해 다른 브라우저로 전환하는 경우, 현재 설정된 테마가 무효화됩니다. 사용자가 선택한 테마 스타일을 영구적으로 저장하려면 선택한 테마가 사용자 정보와 일치해야 하며 사용자가 다음 로그인 시 테마를 직접 읽을 수 있어야 합니다. 물론 이 방법을 사용해야 합니다. 백엔드 관리 시스템, 개인 센터 등과 같이 사용자 권한이 있는 시스템에서.

위 내용은 이 글의 전체 내용입니다. 내용은 독자들이 이해하고 읽기에 매우 상세하고 편리합니다.