Colortip代码实现—jquery插件实战教程（4）

发布于，归属于jquery插件。 前4个座位已被强势霸占！ 共有444人围观    

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

上一篇Colortip难点解析，明河主要讲解了如何使用border生成三角图形，其实这部分并不是jquery插件必须的内容，最关键还是第二篇教程关于jquery插件基础解析，特别是下面这个jquery插件模板：

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

接下来的教程重要讲解Colortip的代码实现。

1、设置参数

  1. var defaultSettings = {
  2.             //颜色
  3.             color        : 'yellow',
  4.             //延迟
  5.             timeout        : 500
  6.         }
  7.         /* 合并默认参数和用户自定义参数 */
  8.         settings = $.extend({},defaultSettings,settings);

我们需要提供2个参数：颜色和隐藏提示框的延迟时间。当然你可以提供更多的配置参数给用户。

2、创建个包含所有颜色信息的数组

  1. //提示框的颜色
  2.         var supportedColors = ['red','green','blue','white','yellow','black'];

3、定时器

我们需要一个定时器，这个定时器用途在于，当你鼠标移开目标容器时，多久隐藏提示框。

  1. /*
  2.     /    定时器类
  3.     */
  4.     function eventScheduler(){}
  5.    
  6.     eventScheduler.prototype = {
  7.         set    : function (func,timeout){
  8.             //添加定时器
  9.             this.timer = setTimeout(func,timeout);
  10.         },
  11.         clear: function(){
  12.             //清理定时器
  13.             clearTimeout(this.timer);
  14.         }
  15.     }

这里需要你具备javascript面向对象编程方面的一些知识。
eventScheduler类很简单，只有二个方法，set()：添加定时器，clear ()：清理定时器

4、创建提示框类

  1. /*
  2.     /    提示类
  3.     */
  4.  
  5.     function Tip(txt){
  6.         this.content = txt;
  7.         this.shown = false;
  8.     }
  9.    
  10.     Tip.prototype = {
  11.         generate: function(){
  12.             //产生提示框
  13.            
  14.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  15.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  16.         },
  17.         show: function(){
  18.             //显示提示框
  19.             if(this.shown) return;
  20.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  21.             this.shown = true;
  22.         },
  23.         hide: function(){
  24.             //隐藏提示框
  25.             this.tip.fadeOut();
  26.             this.shown = false;
  27.         }
  28.     }

Tip也是个javascript类，具有三个方法：generate、show、hide。
值得一提的是，Tip和eventScheduler类是在$.fn.colorTip函数体外。

5、Colortip具体的代码实现

1）实例化Tip和eventScheduler类
  1. // 实例化eventScheduler（定时器）           
  2.             var scheduleEvent = new eventScheduler();
  3.             //实例化Tip(提示类，产生、显示、隐藏)
  4.             var tip = new Tip(elem.attr('title'));
2）产生提示框，将提示框加入到目标容器
  1. // 产生提示框，并给提示框父容器添加样式
  2.             elem.append(tip.generate()).addClass('colorTipContainer');
3）检查目标容器是否有颜色样式
  1. var hasClass = false;
  2.             for(var i=0;i<supportedColors.length;i++)
  3.             {
  4.                 if(elem.hasClass(supportedColors[i])){
  5.                     hasClass = true;
  6.                     break;
  7.                 }
  8.             }

我们只需给没有颜色样式的目标容器，加入默认的颜色样式（黄色）。

4）给目标容器添加鼠标滑过事件
  1. elem.hover(function(){
  2.  
  3.                 tip.show();
  4.                
  5.                 //清理定时器
  6.                
  7.                 scheduleEvent.clear();
  8.  
  9.             },function(){
  10.  
  11.                 //启动定时器
  12.                
  13.                 scheduleEvent.set(function(){
  14.                     tip.hide();
  15.                 },settings.timeout);
  16.  
  17.             });

鼠标滑过目标容器时显示提示框，并清理定时器；当鼠标移开时启动定时器。

6、完整代码如下

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

至此Colortip的代码讲解全部结束，Colortip有个优点就是能够自由控制提示框颜色，但Colortip存在不少的局限性，只能满足基本的应用，下篇教程将对其局限性进行详述，从而进入进阶篇。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

4个座位已被强势霸占！

  1. 66xs

    学习了，管用

  2. andan815

    传说中的javascript最佳实践，顶

  3. renrenqian

    非常感谢你的分享

  4. 洛城

    你好!平时看网上的教程都是一头雾水，这几天无意间进入你的网站 看了几篇教程 感觉思路都很清晰 真是受教了 感谢! 这里有个问题 看到Tip.prototype={generate: function(){}} generate函数里的this.tip是什么意思?不加this.tip 直接return那串tpl行吗?

同类