jQuery實現無刷新切換主題皮膚功能

2014-02-14 14:39:03來源:helloweba作者:月光光

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

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

實現該功能的原理就是通過點擊定義的主題樣式,改變頁面當前引用的主題CSS文件,并且將當前的主題樣式寫入cookie中或者寫入數據庫中,以便下次該用戶重新訪問頁面時,調用的就是上次設置好的主題樣式。

準備主題皮膚樣式

首先,我準備了三個樣式表CSS文件,分別是三種風格的主題皮膚,將其引入頁面,放置在頁面的<head>之間。

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

注意我給每個<link>添加了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,亦或者用戶換用其他瀏覽器瀏覽時,當前設置的主題就會失效。為了讓用戶永久保存選擇的主題樣式,必須將所選的主題與用戶信息對應,并寫入數據庫,下次該用戶登錄就可以直接讀取主題,當然,該方法應用在有用戶權限范圍的系統,如后臺管理系統,個人中心等。

DEMO:http://www.helloweba.com/demo/style-switch/
關鍵詞:jQuery主題皮膚

贊助商鏈接:

福建福彩