web風格樣式動態切換並cookie記憶

weixin_34321977發表於2011-12-26
WebCookie

(1)

(2)html

 <ul class="skinner fr">
  <li class="fl"><a href="#" rel="style_blue" class="styleswitch skin skin_blue fl"></a></li>
  <li class="fl"><a href="#" rel="style_green" class="styleswitch skin skin_green fl"></a></li>
  <li class="fl"><a href="#" rel="style_red" class="styleswitch skin skin_red fl"></a></li>
  <li class="fl"><a href="#" rel="style_purple" class="styleswitch skin skin_purple fl"></a></li>
  <li class="clear"></li>
  </ul>

(3)styleswitch.js

(function($)
{
	$(document).ready(function() {
		$('.styleswitch').click(function()
		{
			switchStylestyle(this.getAttribute("rel"));
			return false;
		});
		var c = readCookie('style');
		if (c) switchStylestyle(c);
	});

	function switchStylestyle(styleName)
	{
		$('link[@rel*=style][title]').each(function(i) 
		{
			this.disabled = true;
			if (this.getAttribute('title') == styleName) this.disabled = false;
		});
		createCookie('style', styleName, 365);
	}
})(jQuery);
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,"",-1);
}

 ------------------rel 屬性-------------------

 

 

rel 屬性 -- rel屬性,描述了當前頁面與href所指定文件的關係.
  • rel屬性通常出現在a,link標籤中
  • 引用網址：http://www.dreamdu.com/xhtml/attribute_rel/
  • 屬性值
    • alternate -- 定義交替出現的連結
    • appendix -- 定義文件的附加資訊
    • bookmark -- 書籤
    • canonical -- 規範網頁是一組內容高度相似的網頁的首選版本
    • chapter -- 當前文件的章節
    • contents
    • copyright -- 當前文件的版權
    • glossary -- 詞彙
    • help -- 連結幫助資訊
    • index -- 當前文件的索引
    • next -- 記錄文件的下一頁.(瀏覽器可以提前載入此頁)
    • nofollow -- 不被用於計算PageRank
    • prev -- 記錄文件的上一頁.(定義瀏覽器的後退鍵)
    • section -- 作為文件的一部分
    • start -- 通知搜尋引擎,文件的開始
    • stylesheet -- 定義一個外部載入的樣式表
    • subsection -- 作為文件的一小部分
  • rel是relationship的英文縮寫

相關文章