jquery實現的換膚並且能夠重新整理儲存狀態

admin發表於2017-03-19
jQuery

換膚效果在很多網站都有應用，不過很多這樣的效果並不完善，那就是當重新整理網頁的時候，換膚狀態無法報錯，又回到了預設的效果，通過程式碼例項介紹一下如何將換膚的狀態儲存在cookie中，也就是儘管重新整理也可以保留換膚的效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#div_side_0,#div_side_1{
  float:left;
  width:120px;
  height:450px;
}
#skin{
  margin:10px;
  padding:5px;
  width:210px;
  padding-right:0px;
  list-style:none;
  border:1px solid #CCCCCC;
  overflow:hidden;
}
#skin li{
  float:left;
  margin-right:5px;
  width:15px;
  height:15px;
  text-indent:-999px;
  overflow:hidden;
  display:block;
  cursor:pointer;
  background-image:url(mytest/demo/theme.gif);
}
#skin_0{background-position:0px 0px;}
#skin_1{background-position:15px 0px;}
#skin_2{background-position:35px 0px;}
#skin_3{background-position:55px 0px;}
#skin_4{background-position:75px 0px;}
#skin_5{background-position:95px 0px;}
#skin_0.selected{background-position:0px 15px !important;}
#skin_1.selected{background-position:15px 15px !important;}
#skin_2.selected{background-position:35px 15px !important;}
#skin_3.selected{background-position:55px 15px !important;}
#skin_4.selected{background-position:75px 15px !important;}
#skin_5.selected{background-position:95px 15px !important;}
.title{cursor:pointer;}
h1 a{
  display:block;
  margin:10px;
  padding:10px 20px;
  width:60px;
  color:#ffffff;
  font-size:14px;
}
h1{background:#999999;}
</style>
<link href="mytest/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script src="mytest/jQuery/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function(){ 
  var $li =$("#skin li"); 
  $li.click(function(){ 
    switchSkin(this.id); 
  }); 
  var cookie_skin=$.cookie("MyCssSkin"); 
  if(cookie_skin){ 
    switchSkin(cookie_skin ); 
  } 
}); 
function switchSkin(skinName){ 
  $("#"+skinName).addClass("selected").siblings().removeClass("selected"); 
  $("#cssfile").attr("href","mytest/css/" + skinName + ".css"); 
  $.cookie( "MyCssSkin",skinName,{ path: '/', expires: 10 }); 
} 
</script>
</head>
<body>
<ul id="skin">
  <li id="skin_0" class="selected">灰色</li>
  <li id="skin_1">紫色</li>
  <li id="skin_2">紅色</li>
  <li id="skin_3">天藍色</li>
  <li id="skin_4">橙色</li>
  <li id="skin_5">淡綠色</li>
</ul>
<div id="div_side_0">
  <div id="news">
    <h1 class="title"><a href="#">jQuery</a></h1>
  </div>
</div>
<div id="div_side_1">
  <div id="game">
    <h1 class="title"><a href="#">螞蟻部落</a></h1>
  </div>
</div>
</body>
</html>

實現了換膚要求，且能夠儲存換膚狀態，程式碼必須在伺服器環境下預覽才能夠有儲存狀態效果，下面介紹一下它的實現過程。

一.實現原理:

當點選按鈕換膚的時候，會將當前使用css檔名稱存入cookie，當重新整理網頁的時候，會從cookie中讀取css檔名，然後使用，這樣就會儲存之前設定的css狀態，於是實現了我們的效果，更多內容可以看程式碼註釋。

二.程式碼註釋:

1.$(function(){})，文件載入完畢再去執行函式中的程式碼。

2.var $li =$("#skin li")，獲取id屬性值為skin的元素下的所有li元素。

3.$li.click(function(){switchSkin(this.id)})，為li元素註冊click事件處理函式，並且呼叫函式進行換膚，引數為當前裡元素的id屬性值。

4.var cookie_skin=$.cookie("MyCssSkin")，獲取指定name名稱的cookie值，這裡是使用的引用cookie操作外掛jquery.cookie.js。

5.function switchSkin(skinName){}，此函式實現了換膚效果，在本例中，傳遞的引數是li元素的id屬性值，其實也是css檔名。

6.$("#"+skinName).addClass("selected").siblings().removeClass("selected")，為指定id屬性值的li元素新增selected樣式類，移除其他兄弟li元素的selected樣式類。

7.$("#cssfile").attr("href","mytest/css/" + skinName + ".css")，呼叫對應的css檔案。

8.$.cookie("MyCssSkin",skinName,{path: '/', expires: 10 })，將css檔名存入cookie。

三.相關閱讀:

1.addClass()函式可以參閱jQuery addClass()一章節。 

2.siblings()函式可以參閱jQuery siblings()一章節。

3.removeClass()函式可以參閱jQuery removeClass()一章節。

相關文章