Colortip–jQuery文字信息提示插件简介

http://www.zhangxinxu.com/wordpress/2010/10/colortip-jquery%E6%96%87%E5%AD%97%E4%BF%A1%E6%81%AF%E6%8F%90%E7%A4%BA%E6%8F%92%E4%BB%B6%E7%AE%80%E4%BB%8B/

by zhangxinxu from http://www.zhangxinxu.com
本文地址&＃xff1a;http://www.zhangxinxu.com/wordpress/?p&＃61;1168

一、恩&＃xff0c;前言

jQuery tip类的信息提示插件层出不穷&＃xff0c;但是我都没有介绍&＃xff0c;为什么呢&＃xff1f;就跟谈恋爱一样&＃xff0c;虽然前面走过的女生不少&＃xff0c;不错的也不少&＃xff0c;但是自己没有谈恋爱的心思&＃xff0c;也是鸳鸯蝴蝶一场梦&＃xff0c;非要在那个特定的时间点上&＃xff0c;正好遇到一个人&＃xff0c;觉得……于是……这就是所谓的缘分。所以&＃xff0c;这里介绍这个Colortip信息提示插件&＃xff0c;不是因为这个插件多么多么的好&＃xff0c;长得多么多么的迷人&＃xff0c;只是自己觉得是不是应该像以前一样&＃xff0c;分析介绍一些不错的常用的插件啊&＃xff0c;正好&＃xff0c;今天让我遇到了它&＃xff0c;觉得好像还挺靠谱的&＃xff0c;于是&＃xff0c;就拿来成文。这就是缘分那&＃xff01;

小插件&＃xff0c;内容不多。效果还凑合&＃xff0c;至于兼容性&＃xff0c;咳咳&＃xff0c;因为是老外写的插件&＃xff0c;国外早就把IE6送回家养老了&＃xff0c;所以&＃xff0c;此插件基本上就没有鸟IE6浏览器&＃xff0c;但是&＃xff0c;在我们伟大的中国&＃xff0c;IE6还是很V5的&＃xff0c;例如下面这张图&＃xff08;淘宝网2010年8月20日首页浏览器比例&＃xff0c;来自“岁月如歌”&＃xff09;&＃xff1a;

所以&＃xff0c;不能放任IE6不管哪&＃xff0c;所以我简单改了原插件CSS的几个样式&＃xff0c;IE6下页焕发光彩了&＃xff0c; 所以文章最后下载demo的时候建议下载小张编辑版的哦 。

二、效果抢鲜

您可以狠狠地点击这里&＃xff1a;Colortip信息提示插件demo

鼠标移到demo页面的橙红色链接上就会看到各种颜色的信息提示框啦&＃xff01;

三、如何使用

我们需要用到一个CSS样式文件&＃xff0c;jQuery库文件&＃xff0c;还有就是插件js文件&＃xff0c;完整的链接代码如下&＃xff1a;

一般这类jQuery插件的使用都是很简单的。最简单的用法就是&＃xff1a;选择器.colorTip();&＃xff0c;例如&＃xff1a;

要想有效果&＃xff0c;貌似绑定的元素需要有title属性&＃xff0c;所以&＃xff0c;上述代码的效果就是&＃xff0c;鼠标移到id为test的元素上&＃xff0c;会显示黄色的提示框&＃xff0c;提示框中的内容就是title属性里面的内容。

当然&＃xff0c;你可以专门指定弹框的颜色&＃xff0c;此插件有六种不同的弹框颜色可供选择&＃xff0c;分别是&＃xff1a;红色(red)、绿色(green)、蓝色(blue)、白色(white)、黄色(yellow)和黑色(black)。
例如demo的绑定代码如下&＃xff1a;

就是显示黄色的信息弹框。

细心的你应该发现&＃xff0c;demo页面里的弹框不都是黄色的啊&＃xff0c;还有绿色、蓝色等&＃xff0c;这是为什么呢&＃xff1f;这是因为此插件还可以通过class属性指定弹出小框的颜色&＃xff0c;如下图所示&＃xff1a;

此段链接样式的显示效果就是&＃xff1a;

四、参考来源以及源文件下载

参考文章&＃xff1a;Colortip – a jQuery Tooltip Plugin

原文的介绍很详细&＃xff0c;详细到一点看的兴趣也没有&＃xff0c;逐步分析CSS&＃xff0c;然后分析插件是如何写的&＃xff0c;OMG&＃xff01;对于一般使用者而言&＃xff0c;才不会关心这些东东呢。此插件的小三角是使用CSS的border属性生成的&＃xff0c;关于CSS border的图形生成技术&＃xff0c;可以参考我的“CSS border三角、圆角图形生成技术简介”一文&＃xff0c;不过此插件原CSS文件并没有兼顾IE6的border生成效果。

下载
英文原版打包源文件&＃xff1a;colortips.zip(5.67K)

正如本文开头提到的&＃xff0c;原版源文件并没有把IE6浏览器计算在内&＃xff0c;所以IE6下的显示是有问题的&＃xff0c;一是border生成的三角有问题&＃xff0c;二是弹出框的定位有问题。我对其CSS文件作了点简单的修改&＃xff0c;修复了IE6下的这些问题&＃xff0c;所以&＃xff0c;我个人是建议您下面的编辑版的源文件&＃xff1a;

编辑版源文件下载&＃xff1a;zxx.colortip.zip(5.96K)