如何動態變更網頁的外觀樣式 (Template)
[ 前言 ]
想隨時替網頁換上不同的衣服嗎? 就像在 Yahoo 首頁的右上方可以看到頁面選擇的按鈕，點下去會出現顏色以及寬窄頁面的切換選項，然後就可以改成自己要的顏色跟寬窄版的版型，這種即時讓使用者任意切換網頁樣式 (Template) 的效果是不是很神奇呢? 其實很簡單，你也可以辦到。[ jQuery.cookie Plugin 下載 ]
[ 變更網頁外觀樣式的方法 ]
步驟 1.首先準備兩個不同的 CSS 樣式 (Template)，然後將檔案上傳到網路空間，假設一個檔名為 StyleSheet0 (預設樣式)，另一個為 StyleSheet1 (要切換的樣式)，然後搜尋</head>，在</head>上方加入下列程式碼。
<link href='http://網路空間位置/StyleSheet0.css' media='screen' rel='stylesheet' id='stylesheet' type='text/css'/>步驟 2.
搜尋</head>，在</head>上方加入下列程式碼。
<!-- jquery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <!-- end jquery -->步驟 3.
將下載的 jQuery cookie Plugin 解壓縮，上傳到網路空間，然後搜尋</head>，在</head>上方加入下列程式碼。
<!-- jquery cookie --> <script src='http://網路空間位址/jquery.cookie.js' type='text/javascript'/> <!-- end jquery cookie -->cookie 是用來記錄訪客選擇的樣式，再次造訪網站時就會顯示之前所選擇的外觀樣式，否則每次訪問網站都只會顯示預設的外觀樣式。
步驟 4.
搜尋<body>，在<body>下方加入下列程式碼。
<script type="text/javascript">
var temp=$.cookie("style");
$("#stylesheet").attr("href","http://網路空間位置/" + temp + ".css");
$(".style").click (function () {
var temp=$(this).attr("id");
$.cookie("style", temp, { expires: 100, path:"/" });
history.go(0);
});
</script>
<input class='style' id='StyleSheet0' type='button' value='預設樣式'/>
<input class='style' id='StyleSheet1' type='button' value='樣式1'/>
這段程式碼會先從 cookie 取得 CSS 的檔名，然後變更 CSS Link 中的 href，中間部分的程式碼是使用 cookie 記錄選擇的 CSS 檔名，如果以後要增加模板樣式只要增加最後按鈕的部分就可以了，要注意 id 的屬性是 CSS 的檔名。如果不想紀錄樣式，把 cookie 的部份拿掉再稍微修改一下即可，或許有些人只改 CSS 還不能滿足，那能不能改變側欄或是其他地方的位置，就像是改 Template 一樣呢? 當然可以囉，有興趣的人可以自行研究，暫時先寫到這裡囉。
留言
張貼留言
1. 文章如有錯誤，歡迎指正。
2. 請勿打廣告，違者一律刪。
3. 歡迎您提供寶貴的意見。