[閒聊] JQuery tooltip
※ [本文轉錄自 Web_Design 看板]
作者: TonyQ (沉默是金) 看板: Web_Design
標題: [閒聊] JQuery tooltip
時間: Tue Aug 5 22:55:22 2008
應版友要求...先寫個非常陽春的介紹...
jQuery 一個強大而有用的 js lib , 可以幫你處理70％以上得跨瀏覽器平台問題,
跟只要會css 就會用的css selector , 可以讓你再也不用拼命打
document.getElementById了, 而且還有非常多人針對他寫plug-in,
連網頁中頗難搞得 dnd (drag-and-drop) 效果都有現成的道具可以套 ,
只要呼叫它的一個方法 , 就有如魔術一般地出現了～
傳統我們在煩惱底層如何實做 , 現在我們可以回歸到組合各式事件的層次
專注於做出我們想要的效果 , 很多事情也不再是不可能,
當然對於讓不少人望之卻步的 ajax技術 , 也得到很好的簡化.
http://jquery.com/
只要把下載回來的 jquery的js檔載入
（<script type="text/javasciprt" src="xxxx.js"></script> )
就有一個比傳統dom object更強大的jQuery Context幫你處理 ,
而且如果你不習慣 , jquery 也沒有直接複寫掉dom ,
仍然提供讓你存取dom的窗口.
另外他也提供一些方式讓你更自由的把onclick onmousemove 之類的事件
綁定到dom物件上 , 而不用受限於一次只能放一個事件 ,
另外更可以讓網頁中往往讓人容易忽略的onclick 等屬性與頁面結構分離.
關於jQuery的廣告台詞就到這裡 , 我以兩年純js開發經驗,
跟後來用jQuery開發至今的經驗作保證 , 他所作的只有更簡化 , 沒有更複雜.
────────────────────────────────
這是其中的一個 jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
它的一些效果直接看這個demo link比較快.
http://jquery.bassistance.de/tooltip/demo/
（另外他所要求的 dimensions plug-in 已被整合到1.2.6 ,
bgiframe 則是 jquery用來修復 ie6底下select會永遠z-index最高的狀況.）
看demo link下面有一些 $ 開頭的code , 那就是他效果的原碼,
只帶有一個簡單的設定檔跟運用jquery的selector , 就可以搞定這一切.
當然 , 要簡化這些需要附上一點小小的代價 ,
jquery min版是30kb, jquery tooltip pack版則是4kb,
但比獨自維護javascript的空間跟腦力相比 , 顯然是小得多,
更不用說 jQuery 本身穩定性已經被群眾測試得很成熟.
────────────────────────────────
前面有版友在問的文字滑過後呈現圖片 , 我用一個簡單的方式來作一個demo.
http://tonyq.org/test/testToolTip.htm
有興趣的話可以看原始碼裡面的註解 , 我是故意採用自訂tag的方式實做 ,
不過關於event的綁定方式跟資料的取得有非常多種組合可以選擇 ,
我選擇我認為最直觀的 , 畢竟加上一個屬性就多一個行為 ,再簡單也不過了.
當然他可以傳入更複雜的html 結構 , 當然相對的你就得告訴他更多細節 .
--
他有一個我覺得算是比較不足的地方 ,
如果你的tip中, 會希望要放超連結之類的 , 他是點不到的 ,
因為它是綁目標的hover事件 , 移到tip上時觸發mouseout,tip 就消失了,
不過我自己有另外針對這個情境另外為他加上一些行為 ,
這就是題外話了, 技術細節有興趣的可以一起討論 .
javascript不難 , 就是雜 ,
選用好的工具可以幫忙簡化思維,推薦給大家.
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
→
08/05 22:58,
08/05 22:58
推
08/05 23:01,
08/05 23:01
→
08/05 23:02,
08/05 23:02
→
08/05 23:02,
08/05 23:02
→
08/05 23:03,
08/05 23:03
推
08/05 23:14,
08/05 23:14
推
08/05 23:24,
08/05 23:24
推
08/05 23:50,
08/05 23:50
推
08/06 01:37,
08/06 01:37
推
08/06 09:15,
08/06 09:15
→
08/06 09:37,
08/06 09:37
→
08/06 09:37,
08/06 09:37
→
08/06 11:31,
08/06 11:31
→
08/06 12:17,
08/06 12:17
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.128.219.202
推
08/06 21:05, , 1F
08/06 21:05, 1F
→
05/04 02:42, , 2F
05/04 02:42, 2F
※ 編輯: TonyQ 來自: 61.224.239.208 (12/15 23:56)
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
