作者TonyQ (沉默是金)
看板Ajax
标题[闲聊] JQuery tooltip
时间Wed Aug 6 12:17:41 2008
※ [本文转录自 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
1F：→ TonyQ:真的是写的很没有内容的一篇文章 , 各位请多多指教...XD 08/05 22:58
2F：推 chrisQQ:友情推! 08/05 23:01
3F：→ chrisQQ:不小心按到enter… 我期待你的ppt啊！！ 08/05 23:02
4F：→ TonyQ:楼上该不会还在研究室? 我也才刚下班回家没多久... ~_~ 08/05 23:02
5F：→ TonyQ:嗯 , 因为那个主题很大 , 投影片跟文字稿都还在弄...忙爆了 08/05 23:03
6F：推 bazoo:赞 08/05 23:14
7F：推 chrisQQ:当然还在研究室… 08/05 23:24
8F：推 qrtt1:有看有推 08/05 23:50
9F：推 koko1487:版友赞许推~ 08/06 01:37
10F：推 edl2000:不推不是人啊 XD 08/06 09:15
11F：→ TonyQ:对了昨天有版友提到授权问题 , 可依需要采取MIT或GPL授权 08/06 09:37
13F：→ PsMonkey:这应该是 po 去 AJAX 版吧..... 08/06 11:31
14F：→ TonyQ:ajax板跟这里都很适合啊...倒是可以转过去就是了...XD 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
15F：推 ericsk:喔喔～我要去 COSCUP 听 TonyQ 大大讲 jQuery 08/06 21:05
16F：→ kosgroup:推 05/04 02:42
※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:56)