jQuery無刷新切換主題皮膚實例講解_jquery

主題皮膚切換功能在許多網站和系統中應用，使用者可以根據此功能設定自己喜歡的主題顏色風格，增強了使用者體驗。本文將圍繞如何使用jQuery實現點擊無刷新切換主題皮膚功能。

實現該功能的原理是透過點擊定義的主題樣式，改變頁面目前引用的主題CSS文件，並且將當前的主題樣式寫入cookie中或寫入資料庫中，以便下次該使用者重新造訪頁面時，呼叫的就是上次設定好的主題樣式。
準備主題皮膚樣式
首先，我準備了三個樣式表CSS文件，分別是三種風格的主題皮膚，將其引入頁面，放置在頁面的

之間。

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

注意我給每個添加了title屬性，是由用處的，另外我禁用了第2個和第3個CSS文件，就是默認起作用的是第1個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是指目前主題選取下的樣式，我用一個小勾錶示目前選取的主題。
jQeury
首先我們要引進jquery函式庫和jquery.cookie外掛。 jquery.cookie插件為jQuery提供了強大的cookie操作功能，你不用去寫複雜的原生的javascript，只管直接呼叫該插件就行。關於該插件的使用，請閱讀本站文章：

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

接下來，當使用者點擊切換選擇主題時，要發生以下動作：取得選擇的主題（id），查看引用的CSS文件，如果發現其title屬性值正好與目前選取的主題id值相等，則套用該主題CSS文件，同時將其他引用的CSS文件停用，並且將目前選取的主題寫入cookie中，設定cookie過期時間，最後將目前選取的主題按鈕（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"); 
}); 

注意，在本例中我將選取的樣式儲存在使用者cookie中，cookie名稱為」mystyle「，值為目前選取的主題值，過去時間為30天，即：expires:30
接著需要做的是頁面載入時，讀取主題cookie值，如果主題cookie存在則呼叫cookie值對應的主題樣式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記錄使用者所選擇設定的主題皮膚樣式，但是當cookie到期或使用者清除了瀏覽器的COOKIE，亦或使用者換用其他瀏覽器瀏覽時，當前設定的主題就會失效。為了讓使用者永久保存選擇的主題樣式，必須將所選的主題與使用者資訊對應，並寫入資料庫，下次該使用者登入就可以直接讀取主題，當然，該方法應用在有使用者權限範圍的系統，如後台管理系統，個人中心等。

以上就是本文的全部內容，內容很詳細，方便讀者理解閱讀，希望大家能有所收穫吧！