調用jQuery特效實作(Tooltips近期迴響篇)
兩個禮拜前在MUKI space*的上一版主題曾看過這效果,不過可惡的小木竟然藏私!
跟諾說自己研究比較有成就感,就因那該死的成就感...所以這篇文章就這樣出現了。=.=a
實際效果請見右側邊欄的近期迴響;將滑鼠移至圖片上即會跳出迴響內容。效果與小木的不太相同,至今諾也不知道這兩者是否使用相同技巧的效果。(囧)
實作這篇前請先安裝Exec-PHP外掛,我們需要它才能在「文章、分頁或側邊欄」執行PHP語法。
步驟一:導入近期迴響含Gravatar大頭貼語法
下面這段語法您可以放在任何想顯示的地方,Ex:文章、分頁、側邊欄或佈景中的任何位置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php global $wpdb; $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date, comment_approved, comment_type,comment_author_url,comment_author_email, SUBSTRING(comment_content,1,150) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date DESC LIMIT 35"; $comments = $wpdb->get_results($sql); $output = $pre_HTML; foreach ($comments as $comment) { $output .= " <a class=\"comments_tips\" href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"" .$comment->comment_author .":" . $comment->com_excerpt . "\">" . get_avatar($comment, 30) . "</a>"; } $output .= $post_HTML; echo $output;?> |
簡易註解:
第6列的「SUBSTRING(comment_content,1,150)」其中150代表要顯示的迴響內容長度、
第13列的「LIMIT 35」表示要顯示35篇最新的(DESC)迴響、
第20列的「get_avatar($comment, 30)」可用來調整Gravatar大頭貼圖片的大小。
其它的部分基本上不需要異動。^_^
步驟二:導入jQuery程式
jQuery程式可從此處下載(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 type="text/javascript" src="http://您空間的網址/jquery.smart-tooltips.js" ></script> |
jquery.smart-tooltips.js檔案中最後面有個「comments_tips」,這標籤就是步驟一裡圖片超連結語法所使用的class,如果想更換標籤名稱可自行修改(需配合步驟一語法同步修改),語法位置如下:
1 2 3 4 | jQuery.noConflict(); jQuery(document).ready(function(){ simple_tooltip(".comments_tips","tooltip"); }); |
步驟三:新增CSS語法
以WordPress為例,請於style.css內新增下列語法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* 調用近期迴響特效 */ .tooltip{ position:absolute; z-index:999; display:none; background-color:#dedede; padding:5px; border:1px solid #fff; width:250px; } .tooltip p{ margin:0; padding:0; color:#fff; background-color:#222; padding:2px 7px; } a .avatar { margin:0px; float:none; } |
OK,所有設置完畢,自行檢查試驗jQuery的效果吧。^_^
jQuery四連彈:
調用jQuery特效實作(隱藏迴響欄位篇)
調用jQuery特效實作(Tab控件篇)
調用jQuery特效實作(MP3控件篇)
調用JavaScript特效實作(頁面載入進度條篇)
附註:
1、jQuery具有跨瀏覽器平台的重要特性,各大瀏覽器均可正常呈現特效。
2、諾提供的jQuery檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。^_^
3、若將步驟二內語法改為「simple_tooltip("a","tooltip");」,可使全站超連結皆有jQuery Tooltips效果。
嗚...我被阿諾罵了-口-!!!
老實說,跟我的效果不太相同
不過我有考慮把我自己的迴響jQuery效果寫進書裡
所以等出了再去看看吧:P
很實用的技巧,等報告寫完後再來改!
好特別喔,不過迴響排行榜感覺更特別~
To muki
好吧,看在妳要出書的份上就讓妳藏私一下。 😳
至少諾研究的方向還沒太歪。XD
To Marty
呵呵,馬丁對這也有興趣啊。 😀
To 東
迴響排行榜就不需要教學了,因為那是外掛做的。XD
詳細及下載連結請參見「系統模組°」:
GravatarGrid 1.0
顯示迴響者的Gravatar圖像並提供一個反向連結做為回饋。
好厲害喔..我要來慢慢看+慢慢弄..呵呵
阿諾超強~
期待你更多關於jQuery的一些應用 😎
有趣的東西,有空來玩玩。
我已經改好囉!很簡單耶!
先筆記下來!^^
等改版的時候再看看能不能整合進去!^^
(謎之音:不知何年何月喔!?)
上面有碳碳耶!(圖)
不會的部分再請教諾^^
To vivi
妳超讚的啦,諾收到妳的禮物了! 🙄
包了好大一卡車的超漂亮手工香皂,好開心啊。
To 香腸
諾超弱,騙吃騙吃。XD
對了你部落格的驗證碼時常會錯誤耶,留言總是要好幾次才能成功發出。QQ
To 馬丁
噗哈哈,馬丁好像留錯篇了,我把它移過來嚕。 😛
To 小笠 & 拆組達人 & 碳碳
嗯,有空玩玩看效果還不錯唷。 😳
我喜歡迴響排行榜... 😎
跟香腸一樣感想~噗
超喜歡那個tab的應用
不佔空間也能快速顯示讓操作更方便 🙄
To 仔仔
喔,你也喜歡排行榜啊,第4則迴響有該外掛名稱。^_^
To dogen
嗯嗯,我看到你站上也裝了! 🙂
很開心大家都喜歡這個jQuery實作。XD
不好意思~
步驟一跟步驟三完全聽不太懂~
我的css全部是寫在範本裡沒有外連style耶~
還有那個php要怎麼安裝~
另外如不安裝可以實行效果嗎?
可是我沒安裝php卻可以看見你部落格上的特效這是什麼原因呢?
另外Tab控件也貼在我的範本裡了~
但是都不能動作~想請問一下在blogspot要如何才能實現呢?
有時候會遇到java不知要貼在範本內的head裡還是網頁元素裡~
傷腦筋~謝謝~
To 小青蛙。
jquery.smart-tooltips.js適合任何支援Javascrpit的空間! 🙂
步驟一僅適用於WordPress平台,那是輸出的語法!EXEC-PHP是WP的外掛。
步驟二內的語法改為「simple_tooltip("a","tooltip");」,可使全站超連結皆有jQuery Tooltips效果。
步驟三新增CSS語法在blogspot也是有地方可以編輯CSS才對。
你可以當這篇是一個概念!Tooltips不限於只用在近期迴響,可以任意修改在想要呈現的地方,端看如何運用囉。^_^
原來是這樣,而且還要搭配Gravatar運用,
我還以為這是一個頭像附加迴響留言的plus,
後來才發現是類似title的迴響效果,
只不過用jQuery實現時效果更加流暢,
Tab控件我也運用成功了!!!!
這樣就可以瘋狂的加入小元件了!!!!
一排放五個,
兩排就可以放十個了~~~~~
非常感謝你~~!!!!
另外PHP原來在WordPress平台才能使用,
如果Blogger也可以支援就好了~ 🙄
對了,再問個問題,Gravatar的訪客可以運用這個方式去顯示,
那在Mybloglog也可以實現嗎?謝謝囉~ 🙂
To 小青蛙
客氣了。Mybloglog的話可能就不支援了,它跟Gravatar提供的服務並不相同。^_^
http://www.gravatar.com/avatar/e84cf9638890f501a76fd74bd57f599c?s=80
你的教學文章都好棒 我還在慢慢學習當中 不知道我的大頭貼有沒有貼成功
To chrischien
有看到你的大頭貼囉,不過原始檔好像最上面有條黑線。 😆
教學文章能跟大家有共鳴那就太棒了。XD
碳碳失敗了!
可能因為碳碳回應人家都加上語法,
所以造成不成功吧?xD(哈哈哈(苦笑))
可以直接調用wordpress內置的jQuery嗎?
好像在wp-includes的js資料夾有看到
To xD~碳
嗯,title描述中不適合放複雜的Html語法。
To 阿茂
WordPress從2.7版就內建了jQuery,2.8版又更新到最新的1.3.2版,所以不用額外宣告是OK的!其他平台就需要宣告了。^_^
我做成功了,太感谢了,很实用!!
To 小T
恭喜你啦。這篇教學比較冷門,想說沒幾個會像我這樣搞說。^_^
PS:你的網站連不進去耶,是網址錯了嗎?!
不冷门呀,挺好的。我也不清楚怎么回事,我用的是ru免费域名,最近国内GFW发飙,把ip在国外的ru域名全封了,好像是因为什么无界浏览,所以最近我换了主机在国内。以前有个外国博主提出我的博客访问不了,我也不知道是什么原因,不晓得是不是因为GFW。PS:我用代理看了我的网站真的连不上。。
To 小T
無界不是用來翻牆的嗎?原來是IP被擋了啊。QQ
諾等等找內地的Proxy代理連連看。^_^
据说是无界用了一个net.ru的域名,所以GFW发威了。内地的应该能看
bro, this only 4 wordpress ?! .. can use for blogspot meh ? pls help me !!
很炫但是..
我覺得畫面在讀取會頓一下
不是很有利閱讀就是了
我本身的blog是朝訪客開啟順暢為優先考量~~
感謝分享,清楚明瞭的教學,謝囉!
To 小T
原來是無界用了net.ru的域名啊,諾有時能連到你的網站,有時卻不行。
To eldy
May be used in blogspot, but you do need to know the grammatical structure. You also need a PHP implementation of environmental.
To Star
可能因為諾貪心想顯示出前45則,調少一點應該就不會頓一下嚕。 😛
諾剛剛去你部落格逛逛,風格很清爽、開啟真的很順暢!
還有小娃娃好口愛。XD
To Neo
感謝厚愛,Neo是好人! 😥
PS:這效果跟你的佈景很搭呢。^_^
步驟2看不懂@@
To dino
用WordPress架的免導入jQuery程式庫!
只要在head標籤結束前加入調用近期迴響特效的宣告語法即可。
我的style.css裡面找不到head標籤
噗,我也想用
可是在Pixnet用這個好像沒用
人家也想用WordPress >o<
To dino
這樣好了,星期一再透過MSN幫你看看header.php,這樣比較快。^_^
To 小傑
那就換成WordPress吧,網路上一堆人會幫你的。 😀
哈哈,我也想阿,但是沒那個經費
如果高中有機會,有免費的網路主機,我就會去架設了
高中我讀資訊科,應該可以學到很多,哈哈。
跟其它的js相衝…殘念…
To 小傑
有興趣玩的話就該花的,主機+域名能貴到哪去?!看有沒有心而已。XD
To Nova
jquery.smart-tooltips.js或CSS修改一下應該就OK了。 🙂
諾看你網站有調用jQuery應該是不會相衝的,如果有衝到應該是CSS部分吧。
是喔~我試了三小時五十八分四十一秒…還是不行說~
嗯嗯,我知道阿
只是高中不知道有沒有時間打工,還要顧學業
我想拼國立科大呢。haha
一定是要花錢的,只是又沒有機會給我花XD
To Nova
好精準的計算!諾再2351秒就下班了。XD
To 小傑
學生先顧學業最要緊,部落格當興趣來研究就好。^_^
謝謝阿諾的耐心回覆^^
不知道blogger是否可以顯示出來?
To dino
客氣了,問題解掉就好。^_^
To kimihu
知道Blogger迴響輸出的語法也是可以套用的。
這裡提供的雖是以WordPress為例,但實際運用是可以做調整的。
怎么能把自己的评论去掉了呢,像你做的那样,我的头像太多,怪怪的
To 小T
改一下WHERE條件即可:
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = '' AND user_id = 0
附註:
user_id = 0也可以置換成user_id <> 1,但用=對資料庫效能較佳。
阿諾 成功了,非常感谢。
太讚了,正好在找
不好意思,諾大,如果要調一行顯示幾個的話要改哪邊,我用了你的語法,但是一行只顯示一個大頭貼就換行了
┌┐
└┘
┌┐
└┘
像這樣
我想要
┌┐┌┐┌┐┌┐┌┐
└┘└┘└┘└┘└┘
┌┐┌┐┌┐┌┐┌┐
└┘└┘└┘└┘└┘
的效果那請問要改哪邊呢
To 大三生
不用設定顯示幾個,依照設定的圖片大小,空間不夠時它會自動換行。
你可能CSS部分導致只能顯示一個就換行了,把CSS清掉測試看看吧。
你好 這個回覆樣式我很喜歡^^
我也試著依照步驟來做
不過卻發現說 圖片會影響到下方欄位的文字
請問一下這該怎麼處理呢?
或是我哪邊有設定上的錯誤?
謝謝哩~
To 疾疾
能顯示的話,jQuery設定上應該沒有問題。
檢查一下CSS部分有沒有跟當前佈景主題衝突吧。
/*
Theme Name: Atahualpa
Theme URI: http://wordpress.bytesforall.com/
Description: 268 options to build your individual theme, without getting worked up over browser compatibilty issues. Up to 4 sidebars, fixed or flexible width layout, custom widget areas, drop down menus, SEO features, rotating header images and an active support forum with over 30,000 posts. New in 3.4.7: Style import / export feature and improved speed.
Version: 3.4.8
Author: BytesForAll
Author URI: http://forum.bytesforall.com/
Tags: white, one-column, two-columns, three-columns, four-columns, fixed-width, flexible-width, custom-colors, custom-header, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, translation-ready
*/
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
/* 調用近期迴響特效 */
.tooltip{
position:relative;
display:none;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
heigh:250px;
}
.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}
a .avatar {
margin:0px;
float:none;
}
你好 這是我目前佈景的style.css
請問應該要改哪邊呢?
阿諾~我發現我直接貼上語法就可以用了耶XD
不知道為什麼,滑鼠移過時~
迴響開啟的速度會延遲一下
沒有阿諾這麼快XD
發表您的迴響(連結不含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.
徽章。創用
隨機文章
視頻。精選 »
活躍文章(近期)
- 觀看次數:
- 觀看次數:
- 觀看次數:
熱門文章(全部)
- 觀看次數:
- 觀看次數:
- 觀看次數:
串聯貼紙