敗家。紀錄

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

樂趣。玩具

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

生活。心情

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

知識。常識

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

軟硬。兼施

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

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

調用jQuery特效實作(Tooltips近期迴響篇)

作者:20090721日 星期二 15:36:27 | 觀看次數:58 則迴響

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>

.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效果。

標籤:, , , , ,

58 則迴響 »

  • 第1則 迴響由 muki Windows XP Firefox 3.0.11 發表:

    嗚...我被阿諾罵了-口-!!!
    老實說,跟我的效果不太相同
    不過我有考慮把我自己的迴響jQuery效果寫進書裡
    所以等出了再去看看吧:P

  • 第2則 迴響由 Marty Windows XP Firefox 3.0.11 發表:

    很實用的技巧,等報告寫完後再來改!

  • 第3則 迴響由 Windows XP Firefox 3.0.7 發表:

    好特別喔,不過迴響排行榜感覺更特別~

  • 第4則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To muki

    好吧,看在妳要出書的份上就讓妳藏私一下。 😳
    至少諾研究的方向還沒太歪。XD

    To Marty

    呵呵,馬丁對這也有興趣啊。 😀

    To 東

    迴響排行榜就不需要教學了,因為那是外掛做的。XD
    詳細及下載連結請參見「系統模組°」:

    GravatarGrid 1.0
    顯示迴響者的Gravatar圖像並提供一個反向連結做為回饋。

  • 第5則 迴響由 vivi Windows XP Firefox 3.0.5 發表:

    好厲害喔..我要來慢慢看+慢慢弄..呵呵

  • 第6則 迴響由 香腸 Windows Vista Firefox 3.5.1 發表:

    阿諾超強~

    期待你更多關於jQuery的一些應用 😎

  • 第7則 迴響由 小笠 Windows Vista Firefox 3.5.1 發表:

    有趣的東西,有空來玩玩。

  • 第8則 迴響由 Marty Windows XP Firefox 3.0.11 發表:

    我已經改好囉!很簡單耶!

  • 第9則 迴響由 拆組達人 Windows XP Google Chrome 2.0.172.37 發表:

    先筆記下來!^^
    等改版的時候再看看能不能整合進去!^^
    (謎之音:不知何年何月喔!?)

  • 第10則 迴響由 xD~碳 Windows XP Internet Explorer 6.0 發表:

    上面有碳碳耶!(圖)
    不會的部分再請教諾^^

  • 第11則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To vivi

    妳超讚的啦,諾收到妳的禮物了! 🙄
    包了好大一卡車的超漂亮手工香皂,好開心啊。

    To 香腸

    諾超弱,騙吃騙吃。XD
    對了你部落格的驗證碼時常會錯誤耶,留言總是要好幾次才能成功發出。QQ

    To 馬丁

    噗哈哈,馬丁好像留錯篇了,我把它移過來嚕。 😛

    To 小笠 & 拆組達人 & 碳碳

    嗯,有空玩玩看效果還不錯唷。 😳

  • 第12則 迴響由 仔仔 Windows XP Firefox 3.0.11 發表:

    我喜歡迴響排行榜... 😎

  • 第13則 迴響由 dogen Windows XP Firefox 3.5.1 發表:

    跟香腸一樣感想~噗

    超喜歡那個tab的應用

    不佔空間也能快速顯示讓操作更方便 🙄

  • 第14則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To 仔仔

    喔,你也喜歡排行榜啊,第4則迴響有該外掛名稱。^_^

    To dogen

    嗯嗯,我看到你站上也裝了! 🙂
    很開心大家都喜歡這個jQuery實作。XD

  • 第15則 迴響由 小青蛙 Windows XP Internet Explorer 6.0 發表:

    不好意思~
    步驟一跟步驟三完全聽不太懂~
    我的css全部是寫在範本裡沒有外連style耶~
    還有那個php要怎麼安裝~
    另外如不安裝可以實行效果嗎?
    可是我沒安裝php卻可以看見你部落格上的特效這是什麼原因呢?
    另外Tab控件也貼在我的範本裡了~
    但是都不能動作~想請問一下在blogspot要如何才能實現呢?
    有時候會遇到java不知要貼在範本內的head裡還是網頁元素裡~
    傷腦筋~謝謝~

  • 第16則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To 小青蛙。

    jquery.smart-tooltips.js適合任何支援Javascrpit的空間! 🙂
    步驟一僅適用於WordPress平台,那是輸出的語法!EXEC-PHP是WP的外掛。
    步驟二內的語法改為「simple_tooltip("a","tooltip");」,可使全站超連結皆有jQuery Tooltips效果。
    步驟三新增CSS語法在blogspot也是有地方可以編輯CSS才對。

    你可以當這篇是一個概念!Tooltips不限於只用在近期迴響,可以任意修改在想要呈現的地方,端看如何運用囉。^_^

  • 第17則 迴響由 小青蛙 Windows XP Firefox 3.0.12 發表:

    原來是這樣,而且還要搭配Gravatar運用,
    我還以為這是一個頭像附加迴響留言的plus,
    後來才發現是類似title的迴響效果,
    只不過用jQuery實現時效果更加流暢,

    Tab控件我也運用成功了!!!!
    這樣就可以瘋狂的加入小元件了!!!!
    一排放五個,
    兩排就可以放十個了~~~~~

    非常感謝你~~!!!!
    另外PHP原來在WordPress平台才能使用,
    如果Blogger也可以支援就好了~ 🙄

  • 第18則 迴響由 小青蛙 Windows XP Firefox 3.0.12 發表:

    對了,再問個問題,Gravatar的訪客可以運用這個方式去顯示,
    那在Mybloglog也可以實現嗎?謝謝囉~ 🙂

  • 第19則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To 小青蛙

    客氣了。Mybloglog的話可能就不支援了,它跟Gravatar提供的服務並不相同。^_^

  • 第20則 迴響由 chrischien Windows XP Google Chrome 2.0.172.39 發表:

    http://www.gravatar.com/avatar/e84cf9638890f501a76fd74bd57f599c?s=80

    你的教學文章都好棒 我還在慢慢學習當中 不知道我的大頭貼有沒有貼成功

  • 第21則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To chrischien

    有看到你的大頭貼囉,不過原始檔好像最上面有條黑線。 😆
    教學文章能跟大家有共鳴那就太棒了。XD

  • 第22則 迴響由 xD~碳 Windows XP Firefox 3.5.1 發表:

    碳碳失敗了!
    可能因為碳碳回應人家都加上語法,
    所以造成不成功吧?xD(哈哈哈(苦笑))

  • 第23則 迴響由 阿茂 Windows XP Firefox 3.5.2 發表:

    可以直接調用wordpress內置的jQuery嗎?
    好像在wp-includes的js資料夾有看到

  • 第24則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To xD~碳

    嗯,title描述中不適合放複雜的Html語法。

    To 阿茂

    WordPress從2.7版就內建了jQuery,2.8版又更新到最新的1.3.2版,所以不用額外宣告是OK的!其他平台就需要宣告了。^_^

  • 第25則 迴響由 小T Windows XP Firefox 3.0.13 發表:

    我做成功了,太感谢了,很实用!!

  • 第26則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To 小T

    恭喜你啦。這篇教學比較冷門,想說沒幾個會像我這樣搞說。^_^
    PS:你的網站連不進去耶,是網址錯了嗎?!

  • 第27則 迴響由 小T Windows XP Firefox 3.0.13 發表:

    不冷门呀,挺好的。我也不清楚怎么回事,我用的是ru免费域名,最近国内GFW发飙,把ip在国外的ru域名全封了,好像是因为什么无界浏览,所以最近我换了主机在国内。以前有个外国博主提出我的博客访问不了,我也不知道是什么原因,不晓得是不是因为GFW。PS:我用代理看了我的网站真的连不上。。

  • 第28則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To 小T

    無界不是用來翻牆的嗎?原來是IP被擋了啊。QQ
    諾等等找內地的Proxy代理連連看。^_^

  • 第29則 迴響由 小T Windows XP Firefox 3.0.13 發表:

    据说是无界用了一个net.ru的域名,所以GFW发威了。内地的应该能看

  • 第30則 迴響由 eldy Windows XP Firefox 3.5.1 發表:

    bro, this only 4 wordpress ?! .. can use for blogspot meh ? pls help me !!

  • 第31則 迴響由 Star Windows XP Internet Explorer 6.0 發表:

    很炫但是..

    我覺得畫面在讀取會頓一下

    不是很有利閱讀就是了

    我本身的blog是朝訪客開啟順暢為優先考量~~

  • 第32則 迴響由 Neo Windows other version Firefox 3.5.2 發表:

    感謝分享,清楚明瞭的教學,謝囉!

  • 第33則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    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:這效果跟你的佈景很搭呢。^_^

  • 第34則 迴響由 dino Windows XP Firefox 3.5.2 發表:

    步驟2看不懂@@

  • 第35則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To dino

    用WordPress架的免導入jQuery程式庫!
    只要在head標籤結束前加入調用近期迴響特效的宣告語法即可。

  • 第36則 迴響由 dino Windows XP Firefox 3.5.2 發表:

    我的style.css裡面找不到head標籤

  • 第37則 迴響由 小傑 Windows XP Firefox 3.5.2 發表:

    噗,我也想用
    可是在Pixnet用這個好像沒用
    人家也想用WordPress >o<

  • 第38則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To dino

    這樣好了,星期一再透過MSN幫你看看header.php,這樣比較快。^_^

    To 小傑

    那就換成WordPress吧,網路上一堆人會幫你的。 😀

  • 第39則 迴響由 小傑 Windows XP Firefox 3.5.2 發表:

    哈哈,我也想阿,但是沒那個經費
    如果高中有機會,有免費的網路主機,我就會去架設了
    高中我讀資訊科,應該可以學到很多,哈哈。

  • 第40則 迴響由 Nova Windows XP Firefox 3.5.2 發表:

    跟其它的js相衝…殘念…

  • 第41則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To 小傑

    有興趣玩的話就該花的,主機+域名能貴到哪去?!看有沒有心而已。XD

    To Nova

    jquery.smart-tooltips.js或CSS修改一下應該就OK了。 🙂
    諾看你網站有調用jQuery應該是不會相衝的,如果有衝到應該是CSS部分吧。

  • 第42則 迴響由 Nova Windows XP Firefox 3.5.2 發表:

    是喔~我試了三小時五十八分四十一秒…還是不行說~

  • 第43則 迴響由 小傑 Windows XP Firefox 3.5.2 發表:

    嗯嗯,我知道阿
    只是高中不知道有沒有時間打工,還要顧學業
    我想拼國立科大呢。haha
    一定是要花錢的,只是又沒有機會給我花XD

  • 第44則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To Nova

    好精準的計算!諾再2351秒就下班了。XD

    To 小傑

    學生先顧學業最要緊,部落格當興趣來研究就好。^_^

  • 第45則 迴響由 dino Windows XP Firefox 3.5.2 發表:

    謝謝阿諾的耐心回覆^^

  • 第46則 迴響由 kimihu Windows XP Maxthon 1.0 based on IE 7.0 發表:

    不知道blogger是否可以顯示出來?

  • 第47則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To dino

    客氣了,問題解掉就好。^_^

    To kimihu

    知道Blogger迴響輸出的語法也是可以套用的。
    這裡提供的雖是以WordPress為例,但實際運用是可以做調整的。

  • 第48則 迴響由 小T Windows other version Firefox 3.5.3 發表:

    怎么能把自己的评论去掉了呢,像你做的那样,我的头像太多,怪怪的

  • 第49則 迴響由 阿諾 Windows XP Firefox 3.5.3 發表:

    To 小T

    改一下WHERE條件即可:
    WHERE comment_approved = '1' AND comment_type = '' AND
    post_password = '' AND user_id = 0

    附註:
    user_id = 0也可以置換成user_id <> 1,但用=對資料庫效能較佳。

  • 第50則 迴響由 小T Windows other version Firefox 3.5.3 發表:

    阿諾 成功了,非常感谢。

  • 第51則 迴響由 網頁設計 Mac OS X Firefox 3.5.5 發表:

    太讚了,正好在找

  • 第52則 迴響由 大三生 Windows XP Internet Explorer 8.0 發表:

    不好意思,諾大,如果要調一行顯示幾個的話要改哪邊,我用了你的語法,但是一行只顯示一個大頭貼就換行了
    ┌┐
    └┘
    ┌┐
    └┘
    像這樣
    我想要
    ┌┐┌┐┌┐┌┐┌┐
    └┘└┘└┘└┘└┘
    ┌┐┌┐┌┐┌┐┌┐
    └┘└┘└┘└┘└┘
    的效果那請問要改哪邊呢

  • 第53則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    To 大三生

    不用設定顯示幾個,依照設定的圖片大小,空間不夠時它會自動換行。
    你可能CSS部分導致只能顯示一個就換行了,把CSS清掉測試看看吧。

  • 第54則 迴響由 疾疾 Windows Vista Google Chrome 5.0.384.0 發表:

    你好 這個回覆樣式我很喜歡^^

    我也試著依照步驟來做

    不過卻發現說 圖片會影響到下方欄位的文字
    請問一下這該怎麼處理呢?
    或是我哪邊有設定上的錯誤?

    謝謝哩~

  • 第55則 迴響由 阿諾 Windows Vista Firefox 3.6.3 發表:

    To 疾疾

    能顯示的話,jQuery設定上應該沒有問題。
    檢查一下CSS部分有沒有跟當前佈景主題衝突吧。

  • 第56則 迴響由 疾疾 Windows Vista Google Chrome 5.0.384.0 發表:

    /*
    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
    請問應該要改哪邊呢?

  • 第57則 迴響由 Alan Windows other version Google Chrome 10.0.612.3 發表:

    阿諾~我發現我直接貼上語法就可以用了耶XD

  • 第58則 迴響由 Alan Windows other version Google Chrome 10.0.612.3 發表:

    不知道為什麼,滑鼠移過時~
    迴響開啟的速度會延遲一下
    沒有阿諾這麼快XD

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

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

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

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

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