Colortip的缺陷—jquery插件实战教程（完结篇）

jquery插件实战教程，明河已经发了四篇教程：

• 制作jquery文字提示插件—jquery插件实战教程（1）
• jquery插件基础解析—jquery插件实战教程（2）
• Colortip难点解析—jquery插件实战教程（3）
• Colortip代码实现—jquery插件实战教程（4）

今天这篇教程将是这个系列教程的完结篇，明河主要讲解Colortip这个jquery提示框插件的缺陷，既然有缺陷，当然明河会提供相应的解决方案，所以这篇教程既是完结篇，又是下一个jquery插件进阶教程的引子。

整个系列教程，最重要的是第二篇教程：jquery插件基础解析—jquery插件实战教程（2），所以如果你想学jquery插件制作，这篇教程尽量把它看懂，至于其他篇教程，看不懂，不影响你实际演练。

Colortip的缺陷

这个世上没有百分百完美的人，同样也没有百分百完美的程序，Tutorials无疑是个优秀的前端工程师，但Colortip一样有缺陷。

一、Colortip的bug

根据明河的测试，Colortip在IE6下存在2个bug：

1、IE6下，倒三角部分高度失效，出现难看的背景颜色：（请看下图的高亮部分）

明河说明：其实这个是IE6常见的一个bug，就是一个层，无端出现12px的高度，当你所设置的高度小于12px时都无效。解决方法很简单，给这个层加上overflow:hidden;

2、IE6下，提示框位置错误，提示框不是相对于目标容器居中显示，而是变成靠右显示

二、Colortip的先天缺陷

1、将提示框添加到目标容器内部

Tutorials的思路是把提示框当做目标容器的子容器，当鼠标滑过目标容器时，显示子容器提示框，这个思路本身没错，但明河觉得考虑不足。当把提示框当做目标容器的子容器，也就是说提示框的样式将会继承于目标容器，而目标容器的样式你无法确定，这是一个样式继承的风险！

2、提示框的内容无法修改，只针对带有title属性的目标元素

Colortip只能处理一种情况，如果你想要在提示框中显示图片或者列表，Colortip就爱莫能助了。

三、Colortip的功能缺陷

请跟着明河思考以下问题：

• 如果我想控制提示框的出现位置，该如何办？
• 有没有一种方法我可以控制提示框的内容？
• 我能不能自由的控制提示框的显示/隐藏？
• 显示/隐藏提示框的效果能不能自由控制？
• 我能不能在显示/隐藏提示框后干些其他事？

你思考完这些问题，再回头看Colortip，你会发现，很遗憾，Colortip明显无法满足我们的要求。
所以明河依照Colortip的原理，写了个新的jquery提示框插件，明河将其命名为：yitip，而yitip，恰恰能解决以上问题。

四、jquery插件基础模板的缺陷

先来回忆下jquery插件基础模板：

(function($){
$.fn.插件名 = function(settings){

var defaultSettings = {

}

/* 合并默认参数和用户自定义参数 */
settings = $.extend({},defaultSettings,settings);
return this.each(function(){

});

}

})(jQuery);

（明河再次提醒：这个模板非常重要，请尽量看懂它。）
Colortip的功能缺陷，实际上有很大原因是由于jquery插件基础模板的缺陷引起的。那么jquery插件基础模板的缺陷在哪呢？又是如何解决这些缺陷呢？请看下一个系列教程：jquery插件制作进阶教程