制作jquery文字提示插件—jquery插件实战教程（1）

今天在浏览tutorialzine时候有篇教程讲解如何写个jquery文字提示插件，这插件很简单，很适合用于讲解jquery插件机制，作者也借此抛砖引玉先讲解具体一个插件，这个插件名为：Colortip，然后在下篇教程讲解jquery插件机制。

效果如下图，鼠标滑过链接出现文字提示，提示框的背景颜色可以自由控制。

•  
• 点此下载

制作教程

一、功能讲解

• 1、鼠标经过带有”title”属性的容器，出现title中的内容（一般是链接、图片）
• 2、可以控制提示框的背景颜色

二、创建html结构

1. <a href="http://www.36ria.com/2741" class="blue" title="推荐9个jquery手风琴菜单插件">推荐9个jquery手风琴菜单插件</a>

最重要的是title属性，此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时，会创建如下提示框容器：

1. <a class="blue colorTipContainer" href="http://www.36ria.com/2741">推荐9个jquery手风琴菜单插件 
2.   <span class="colorTip" style="margin-left: -60px;">推荐9个jquery手风琴菜单插件
3.  
4.  <span class="pointyTipShadow"></span> 
5.  
6.  <span class="pointyTip"></span> 
7.  
8.  </span> 
9. </a>

css部分的内容不是讲解关键，作者予以略过。

三、插件代码colortip-1.0-jquery.js

1. (function($){
2.     $.fn.colorTip = function(settings){
3.  
4.         var defaultSettings = {
5.             //颜色
6.             color        : 'yellow',
7.             //延迟
8.             timeout        : 500
9.         }
10.         //提示框的颜色
11.         var supportedColors = ['red','green','blue','white','yellow','black'];
12.        
13.         /* 合并默认参数和用户自定义参数 */
14.         settings = $.extend(defaultSettings,settings);
15.        
16.         return this.each(function(){
17.  
18.             var elem = $(this);
19.            
20.             // 如果该对象不包含title属性，直接予以返回
21.             if(!elem.attr('title')) return true;
22.            
23.             // 实例化eventScheduler（定时器）           
24.             var scheduleEvent = new eventScheduler();
25.             //实例化Tip(提示类，产生、显示、隐藏)
26.             var tip = new Tip(elem.attr('title'));
27.  
28.             // 产生提示框，并给提示框父容器添加样式
29.            
30.             elem.append(tip.generate()).addClass('colorTipContainer');
31.  
32.             // 检查提示框父容器是否有颜色样式
33.            
34.             var hasClass = false;
35.             for(var i=0;i<supportedColors.length;i++)
36.             {
37.                 if(elem.hasClass(supportedColors[i])){
38.                     hasClass = true;
39.                     break;
40.                 }
41.             }
42.            
43.             // 如果没有，使用默认的颜色
44.            
45.             if(!hasClass){
46.                 elem.addClass(settings.color);
47.             }
48.            
49.             // 鼠标滑过提示框父容器时，显示提示框
50.             // 鼠标移出，则隐藏
51.            
52.             elem.hover(function(){
53.  
54.                 tip.show();
55.                
56.                 //清理定时器
57.                
58.                 scheduleEvent.clear();
59.  
60.             },function(){
61.  
62.                 //启动定时器
63.                
64.                 scheduleEvent.set(function(){
65.                     tip.hide();
66.                 },settings.timeout);
67.  
68.             });
69.            
70.             //删除title属性
71.             elem.removeAttr('title');
72.         });
73.        
74.     }
75.  
76.  
77.     /*
78.     /    定时器类
79.     */
80.  
81.     function eventScheduler(){}
82.    
83.     eventScheduler.prototype = {
84.         set    : function (func,timeout){
85.             //添加定时器
86.             this.timer = setTimeout(func,timeout);
87.         },
88.         clear: function(){
89.             //清理定时器
90.             clearTimeout(this.timer);
91.         }
92.     }
93.  
94.  
95.     /*
96.     /    提示类
97.     */
98.  
99.     function Tip(txt){
100.         this.content = txt;
101.         this.shown = false;
102.     }
103.    
104.     Tip.prototype = {
105.         generate: function(){
106.             //产生提示框
107.            
108.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
109.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
110.         },
111.         show: function(){
112.             //显示提示框
113.             if(this.shown) return;
114.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
115.             this.shown = true;
116.         },
117.         hide: function(){
118.             //隐藏提示框
119.             this.tip.fadeOut();
120.             this.shown = false;
121.         }
122.     }
123.    
124. })(jQuery);

关键代码注释作者已经翻译了，插件的制作思路，作者将在接下来的教程详解。

四、jquery插件模板

jquery插件是有固定的模板的，你大概大部分的jquery插件源码，会发现都有一套固定模板。
模板如下：

1. (function($){
2.     $.fn.插件名= function(settings){
3.                 //默认参数
4.         var defaultSettings = {
5.  
6.         }
7.        
8.         /* 合并默认参数和用户自定义参数 */
9.         settings = $.extend(defaultSettings,settings);
10.        
11.         return this.each(function(){
12.  
13.         });
14.        
15.     }
16.    
17. })(jQuery);

这是最基础的jquery插件结构，作者将在下一篇教程详解jquery的插件机制。