分類  >  Web前端 >

web 切換肌膚

tags:    時間:2013-12-09 23:28:19
web 切換皮膚
情景:web網站設計了兩套皮膚:黑色和藍色,主界面有一個按鈕,點擊按鈕,可以在這兩個皮膚間切換。

實現:jquery操作css樣式,並且將當前的主題樣式寫入cookie中(如需永久有效,請寫入資料庫中)。

需要的js:jquery.cookie.js 以及 jquery.js。

全局頁面中,有引入css樣式的連接:
<link href="" rel="stylesheet" type="text/css" id="css_theme_style"/>


在js腳本中,給該css樣式添加href屬性:
<script> var cookie_style = $.cookie("themestyle"); //取出取名為"themestyle"的cookie的值 if(cookie_style=="blue"){  	 $('#css_theme_style').attr('href', 'skins/Blue/css/all.css'); //藍色樣式 }else{  	 $('#css_theme_style').attr('href', 'skins/Black/css/all.css'); //黑色樣式 }  </script>


點擊切換皮膚按鈕時,調用的js函數:
function changeCssThemeStyle() { 	var cookie = $.cookie("themestyle");  	if (cookie == "blue") { 		$.cookie("themestyle", "black",{expires: 365, path: '/'}); //修改或添加名為"themestyle"的cookie,值設為"black",有效期為365天,路徑為網站的根目錄。 	} else { 		$.cookie("themestyle", "blue",{expires: 365, path: '/'}); 	} 	window.location = window.location; }

注意:在默認情況下,只有設置cookie的網頁才能讀取該cookie。如果想讓一個頁面讀取另一個頁面設置的cookie,必須設置cookie的路徑。cookie的路徑用於設置能夠讀取cookie的頂級目錄。將這個路徑設置為網站的根目錄(「/」),可以讓所有網頁都能互相讀取cookie.

推薦閱讀文章

Bookmark the permalink ,來源:互聯網