網頁

如何動態變更網頁的外觀樣式 (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. 歡迎您提供寶貴的意見。