不管是自己架設的BLOG或是免費空間的BLOG,
除了最重要的文章內容是吸睛主力外,
版型及版面的編排也是最容易引人注意的重點!
每看到新的外掛或功能,
總是想把它裝在自己的BLOG上,
但版面空間總是有限,
實在無法把所有想要的都加進去,
即使加入目前有的也導致版面有點凌亂…
今天在敗家誌中看到有關JQuery的設定心得分享,
於是就現學現賣且馬上加進我的BLOG中,
老實講,
雖然不了JQuery是啥麼東東…
但按圖索驥與說明設定後,
效果著實令人滿意喔!

原文引用如下:

JQuery Tab控件篇

步驟一：導入jQuery程式庫及調用Tab控件語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
Tab控件語法於此處下載(1KB)，將檔案解壓縮後放至於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置：

<!-- 導入jQuery程式庫 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<!-- 調用jQuery的Tabs控件 -->
<script src="http://您空間的網址/jquery.tabs.js" type="text/javascript"><!--mce:1--></script>

設置如下圖(請自行修改jquery.tabs.js檔案所放置的位置)：

導入jQuery程式庫及調用Tab控件語法

步驟二：加入Tab控件所使用的CSS語法

以WordPress為例，請於style.css內新增下列語法：

/* jquery-tabs格式 */

.jquery-tabs{background-color:#FAFAFA;}
.jquery-tabs p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:2px;padding:2px 3px;}
.jquery-tabs p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.jquery-tabs p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.jquery-tabs li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.jquery-tabs .mhot,.jquery-tabs.allhot{display:none;}

步驟三：加入Tab控件語法

範例為三個頁籤，請自行依使用狀況增減。^_^

<div class="jquery-tabs">
<span id="tab_1">第一個頁籤標題</span>
<span id="tab_2">第二個頁籤標題</span>
<span id="tab_3">第三個頁籤標題</span>
<ul class="tab_1">
第一個頁籤內容(圖片或文字)</ul>
<ul class="tab_2">
第二個頁籤內容(圖片或文字)</ul>
<ul class="tab_3">
第三個頁籤內容(圖片或文字)</ul>
</div>

OK，所有設置完畢，自行檢查試驗jQuery的效果吧。^_^

附註：

1. jQuery具有跨瀏覽器平台的重要特性，各大瀏覽器均可正常呈現特效。
2. 諾提供的jQuery檔案，語法部分均有詳細註解，如有需要可依使用需求自行修改。

隱藏迴響欄位篇

請比較上面兩張圖片的差異

通常在部落格要留下迴響時，都會被要求填入一些必填欄位。Ex：姓名(暱稱)、電子信箱、或網址等…
當訪客的瀏覽器有開啟cookies功能時，這些迴響欄位的值將紀錄在該台電腦的cookies中，於第二次再透過同一台電腦瀏覽時，這些「迴響欄位」將會預設進去。

利用這個特性，我們可將曾經留過遺言的訪客的迴響欄位「隱藏起來」，讓版面看起來更簡潔一點喔。^_^
要隱藏欄位的實現方法有很多種，其中諾認為「最簡單、改最少、特效又優」的，就是用jQuery的方式來實現囉。但是以諾對jQuery的程度要談教學不太可能，這篇是單純以調用jQuery特效來隱藏迴響欄位的實作分享，只要照著步驟一步一步做、把語法貼一貼，自然就能成功了

步驟一：導入jQuery程式庫及調用迴響隱藏語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
迴響隱藏語法於此處下載(1KB)，將檔案解壓縮後放至於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置：

<!-- 導入jQuery程式庫 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:2--></script>
<!-- 調用jQuery隱藏已來過訪客的迴響輸入欄位 -->
<script src="http://您空間的網址/jquery.comments.js" type="text/javascript"><!--mce:3--></script>

步驟二：加入隱藏及顯示語法

以WordPress為例，於comments.php內輸入訪客資料欄位表單的語法上方，新增下列語法：

<!-- 調用jquery隱藏已來過訪客的迴響輸入欄位 -->

<div id="welcome">
%s。歡迎您發表迴響唷！'), $comment_author) ?&gt;</div>

步驟三：加入需執行隱藏及顯示的ID標籤

紅色框為需執行隱藏及顯示的「ID標籤」，藍色框為訪客資料「欄位表單」。

OK，所有設置完畢，自行檢查試驗jQuery的效果吧。^_^

附註：

1. jQuery具有跨瀏覽器平台的重要特性，各大瀏覽器均可正常呈現特效。
2. 諾提供的jQuery檔案，語法部分均有詳細註解，如有需要可依使用需求自行修改。

Tags: cookies, google, Jquery, Tab, Wordpress, 外掛, 敗家誌, 隱藏欄位

Posted in 網路 | 3 Comments | Posted by |
| | | | | |
| 引用網址： |