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插件制作进阶教程