亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery無刷新切換主題皮膚實(shí)例講解

 更新時(shí)間:2015年10月21日 17:09:24   投稿:lijiao  
這篇文章主要內(nèi)容是jQuery無刷新切換主題皮膚實(shí)例講解,本文應(yīng)用cookie記錄用戶所選擇設(shè)置的主題皮膚樣式,需要了解的朋友可以參考下

主題皮膚切換功能在很多網(wǎng)站和系統(tǒng)中應(yīng)用,用戶可以根據(jù)此功能設(shè)置自己喜歡的主題顏色風(fēng)格,增強(qiáng)了用戶體驗(yàn)。本文將圍繞如何使用jQuery實(shí)現(xiàn)點(diǎn)擊無刷新切換主題皮膚功能。

實(shí)現(xiàn)該功能的原理就是通過點(diǎn)擊定義的主題樣式,改變頁面當(dāng)前引用的主題CSS文件,并且將當(dāng)前的主題樣式寫入cookie中或者寫入數(shù)據(jù)庫中,以便下次該用戶重新訪問頁面時(shí),調(diào)用的就是上次設(shè)置好的主題樣式。
準(zhǔn)備主題皮膚樣式
首先,我準(zhǔn)備了三個(gè)樣式表CSS文件,分別是三種風(fēng)格的主題皮膚,將其引入頁面,放置在頁面的<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" /> 

注意我給每個(gè)<link>添加了title屬性,是由用處的,另外我禁用了第2個(gè)和第3個(gè)CSS文件,就是默認(rèn)起作用的是第1個(gè)CSS文件。
XHTML

<ul id="styles"> 
 <li id="default">經(jīng)典</li> 
 <li id="blue">淡藍(lán)</li> 
 <li id="brown">棕色</li> 
</ul> 

三種主題風(fēng)格用于點(diǎn)擊切換,注意我分別給每個(gè)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是指當(dāng)前主題選中下的樣式,我用一個(gè)小勾表示當(dāng)前選中的主題。
jQeury
首先我們要引入jquery庫和jquery.cookie插件。jquery.cookie插件為jQuery提供了強(qiáng)大的cookie操作功能,你不用去寫復(fù)雜的原生的javascript,只管直接調(diào)用該插件就行。關(guān)于該插件的使用,請(qǐng)閱讀本站文章:

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

接下來,當(dāng)用戶點(diǎn)擊切換選擇主題時(shí),要發(fā)生以下動(dòng)作:獲取選擇的主題(id),查看引用的CSS文件,如果發(fā)現(xiàn)其title屬性值正好與當(dāng)前選中的主題id值相等,則應(yīng)用該主題CSS文件,同時(shí)將其他引用的CSS文件禁用,并且將當(dāng)前選中的主題寫入cookie中,設(shè)置cookie過期時(shí)間,最后將當(dāng)前選中的主題按鈕(li)設(shè)置為當(dāng)前選中狀態(tài)。具體看下面的代碼:

$("#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“,值為當(dāng)前選中的主題值,過去時(shí)間為30天,即:expires:30
接著需要做的是頁面載入時(shí),讀取主題cookie值,如果主題cookie存在則調(diào)用cookie值對(duì)應(yīng)的主題樣式CSS文件,并且設(shè)置當(dāng)前主題按鈕狀態(tài)為選中狀態(tài),反之,則調(diào)用默認(rèn)樣式。代碼如下:

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(){})中,工作到此完成。
值得一提的是,本文應(yīng)用的cookie記錄用戶所選擇設(shè)置的主題皮膚樣式,但是當(dāng)cookie到期或者用戶清除了瀏覽器的COOKIE,亦或者用戶換用其他瀏覽器瀏覽時(shí),當(dāng)前設(shè)置的主題就會(huì)失效。為了讓用戶永久保存選擇的主題樣式,必須將所選的主題與用戶信息對(duì)應(yīng),并寫入數(shù)據(jù)庫,下次該用戶登錄就可以直接讀取主題,當(dāng)然,該方法應(yīng)用在有用戶權(quán)限范圍的系統(tǒng),如后臺(tái)管理系統(tǒng),個(gè)人中心等。

以上就是本文的全部內(nèi)容,內(nèi)容很詳細(xì),方便讀者理解閱讀,希望大家能有所收獲吧!

相關(guān)文章

最新評(píng)論