敗家。紀錄

敗家紀錄、開箱評測、好物推薦、時尚精品、生小惡魔

樂趣。玩具

有趣玩具、酷搜搞笑、幽默小品、樂活人生、搞笑影片

生活。心情

生活心情、饕客美食、遊山玩水、動漫音樂、電影欣賞

知識。常識

實用知識、遺忘常識、職場技巧、投資方式、理財規劃

軟硬。兼施

程式設計、軟體教學、硬體效能、部落優化、網站資源

Twitter It! Plurk this! Share to Facebook!
首頁 » 軟硬。兼施

調用jQuery特效實作(隱藏迴響欄位篇)

作者:20090406日 星期一 2:03:13 | 觀看次數:26 則迴響

隱藏迴響欄位前
隱藏迴響欄位後

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

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

後續諾會接著介紹jQuery的Tab實現(2)、3KB大小的jQuery版MP3播放控件隨機文字圖片等,讓大家可以應用於部落格中。如果可以...歡迎實作成功後一起交流與分享心得喔。^_^
下面簡單的三個步驟就能完成所有設置,我們就一步一步的來實作吧~*

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

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

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

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

導入jQuery程式庫及調用迴響隱藏語法

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

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

1
2
3
4
5
<!-- 調用jquery隱藏已來過訪客的迴響輸入欄位 -->
<?php if ( $comment_author != "" ) : ?>
<div id="welcome">
<?php printf(__('哈囉,親愛的<strong>%s</strong>。歡迎您發表迴響唷!'), $comment_author) ?> </div>
<?php endif; ?>

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

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

加入需執行隱藏及顯示的ID標籤

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

附註:

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

  1. jQuery語法部分的$代稱諾都換掉了,避免與prototype.js的代稱衝突,所以可以安心使用。 [來源 ↩]
  2. 實作可見於右側側邊欄。 [來源 ↩]
標籤:, , , , , ,

26 則迴響 »

發表您的迴響(連結不含Nofollow)

如果喜歡這篇文章,您可以於下方「留下您的迴響」 或於您網站使用此文章的「TrackBack」連結。當然更歡迎您訂閱「此篇文章(RSS)」「敗家誌°(RSS)」,以便將日後新文章發佈給您的 RSS 瀏覽器。

敗家誌°支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。emoticons

(完成後可按 Ctrl+Enter 發表迴響)

防機器人: 的答案是? (必填)