[閒聊] JQuery tooltip
應版友要求...先寫個非常陽春的介紹...
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://tony1223.no-ip.org:81/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, , 1F
08/05 22:58, 1F
推
08/05 23:01, , 2F
08/05 23:01, 2F
→
08/05 23:02, , 3F
08/05 23:02, 3F
→
08/05 23:02, , 4F
08/05 23:02, 4F
→
08/05 23:03, , 5F
08/05 23:03, 5F
推
08/05 23:14, , 6F
08/05 23:14, 6F
推
08/05 23:24, , 7F
08/05 23:24, 7F
推
08/05 23:50, , 8F
08/05 23:50, 8F
推
08/06 01:37, , 9F
08/06 01:37, 9F
推
08/06 09:15, , 10F
08/06 09:15, 10F
→
08/06 09:37, , 11F
08/06 09:37, 11F
→
08/06 09:37, , 12F
08/06 09:37, 12F
→
08/06 11:31, , 13F
08/06 11:31, 13F
→
08/06 12:17, , 14F
08/06 12:17, 14F
→
08/06 12:23, , 15F
08/06 12:23, 15F
→
08/06 12:24, , 16F
08/06 12:24, 16F
推
08/06 15:50, , 17F
08/06 15:50, 17F
推
08/06 22:34, , 18F
08/06 22:34, 18F
推
08/07 02:37, , 19F
08/07 02:37, 19F