[閒聊] JQuery tooltip

[TonyQ (沉默是金)]

應版友要求...先寫個非常陽春的介紹...

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
→ TonyQ:真的是寫的很沒有內容的一篇文章 , 各位請多多指教...XD
推 chrisQQ:友情推!
→ chrisQQ:不小心按到enter… 我期待你的ppt啊！！
→ TonyQ:樓上該不會還在研究室?  我也才剛下班回家沒多久... ~_~
→ TonyQ:嗯 , 因為那個主題很大 , 投影片跟文字稿都還在弄...忙爆了
推 bazoo:讚
推 chrisQQ:當然還在研究室…
推 qrtt1:有看有推
推 koko1487:版友讚許推~
推 edl2000:不推不是人啊 XD
→ TonyQ:對了昨天有版友提到授權問題 , 可依需要採取MIT或GPL授權
→ TonyQ:http://docs.jquery.com/Licensing
→ PsMonkey:這應該是 po 去 AJAX 版吧.....
→ TonyQ:ajax板跟這裡都很適合啊...倒是可以轉過去就是了...XD
→ TonyQ:有需要對jQuery有進一步介紹的 , 可以跟我討論.
→ TonyQ:畢竟我們的確是在討論"網頁設計". 網頁效果佔設計面不算少.
推 dspswen:超讚 !!! 偉哉 !!!
推 Fadis:好文推~~
推 maonenine:想不到回的這麼專業，受教了