調用jQuery特效實作(隱藏迴響欄位篇)
通常在部落格要留下迴響時,都會被要求填入一些必填欄位。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檔案所放置的位置):
步驟二:加入隱藏及顯示語法
以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標籤」,藍色框為訪客資料「欄位表單」。
OK,所有設置完畢,自行檢查試驗jQuery的效果吧。^_^
附註:
1、jQuery具有跨瀏覽器平台的重要特性,各大瀏覽器均可正常呈現特效。
2、諾提供的jQuery檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。^_^
遺言......orz
唔,似乎很難。
阿,隱藏了。
To 天仙
痾...遺言 = 遺留下來的文字。
好吧,我承認這個梗很爛。ˊˋ
To 藍兒
呵呵,不會啦~*
三個步驟就搞定啦。^_^
測試留言...
可以了…
將網站設成白名單後就不會出現未輸入個資的錯誤訊息了
To 企鵝
設成白名單那是瞎咪?!
怎麼會有未輸入個資的錯誤訊息?!
因為企鵝有裝Adblock Plus掛件
若是不設成白名單(不阻擋廣告)的話
就會將輸入個資的欄位阻擋掉
因而造成按下發表留言後卻出現未輸入個資的錯誤訊息…
不過只要先前曾輸入過資料,就算將白名單取消依然可以正常的迴響喔~ ^^
這東西真棒,有空再來裝看看~
To 企鵝
喔,原來是FireFox的外掛。 😀
那外掛可能把Comments的JS當成AD了,呵。
還好輸入資料後就會存在Cookies中,所以將白名單取消時就不會影響正常的迴響了。^_^
To Nova
嗯,有空裝起來玩玩看喔,jQuery很多特效可以玩,你會愛上它的。 🙄
有空來裝裝看好了
看起來好像還滿好用的
To 佑
呵呵,可以連Tab控件一起做來玩。 🙂
我又寫了一篇「調用jQuery特效實作(Tab控件篇)」。^_^
😮 路过。
大大阿~ 我加入要放入HEAD 部分的程式碼後 ~ 首頁原本的 TAB 效果 就不會自動縮起來了 囧 ... 是衝突到了嗎? 麻煩您了 謝謝 😕
這好酷,我加在我今天的文章裡 😀
To savasun
痾,順走。
To 巴奇
你的佈景或外掛是否已經有調用jQuery了?
可以檢查看看Tab的CSS標籤是否跟佈景宣告的標籤衝突到了。
正常來說是不會衝突到的。
To 凱特打結
大姐你真好,感謝厚愛啊。 ➡
原來Jquery這麼神奇啊!
學到有用的技巧!
阿諾,請教如何才能不把輸入驗證碼的欄位也隱藏起來了呢?因為我發現我的會耶!但我是照著你的說明放的....
To 馬丁
在步驟三中加入需執行隱藏及顯示的ID標籤時,不要包到驗證碼欄位即可。 🙂
如果你的驗證碼欄位是外掛自動添加,且加在標籤中那就得要改外掛的Code了,或是換成跟諾同款的外掛即可。XD
外掛:Quiz 1.1.1
回答出問題的正確答案時才能發表迴響(防機器人),全部文章可採預設問題,也可單篇文章設定或關閉問題。支援中文問題與複數答案。
试试看哈……
To Eureka
嗯,預祝實作順利。 🙂
thanks 😆
原來此功能是jquery實現的, 今天是大開眼界了, 一直以為是php寫的過程程式語言. 謝謝大大分享. 🙂
来试用学习下~
建议你的评论也搞个分页,要不这样太长了感觉很不舒服,也影响速度。
請問下載了jQuery程式庫之後,應該上傳到哪個資料夾? 外掛資料夾? 還是...?
好用!拿走囉~~
發表您的迴響(連結不含Nofollow)
近期迴響 咕狗搜尋 切換語言
敗家誌°社群
友好連結(輪播)
電子郵件訂閱
Histats計數器
贊助敗家誌°
迴響排行榜
標籤雲
ADSL Blog Domain Google iPhone jQuery N82 Nokia Plugs S60 3rd SQL WordPress YouTube 串文 便宜貨 免費 公告 勸敗 地圖 工人舍 微軟 心得分享 感動 搞笑 敗家 更新 權限 正妹 正體中文 玩具 疊疊樂 知識 禮物 系統優化 純手工 網站資源 職場工作 虛擬主機 語法 資料庫 軟體分享 遊戲 金融 開箱文 電影
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
徽章。創用
隨機文章
視頻。精選 »
活躍文章(近期)
- 觀看次數:
- 觀看次數:
- 觀看次數:
熱門文章(全部)
- 觀看次數:
- 觀看次數:
- 觀看次數:
串聯貼紙