首页>>Jquery文字>>Colortip 自定义tips的颜色(2015-07-04)

Colortip 自定义tips的颜色

Colortip 自定义tips的颜色
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. (function($){  
  2.     $.fn.colorTip = function(settings){  
  3.   
  4.         var defaultSettings = {  
  5.             color       : 'yellow',  
  6.             timeout     : 500  
  7.         }  
  8.           
  9.         var supportedColors = ['red','green','blue','white','yellow','black'];  
  10.           
  11.         /* Combining the default settings object with the supplied one */  
  12.         settings = $.extend(defaultSettings,settings);  
  13.   
  14.         /* 
  15.         *   Looping through all the elements and returning them afterwards. 
  16.         *   This will add chainability to the plugin. 
  17.         */  
  18.           
  19.         return this.each(function(){  
  20.   
  21.             var elem = $(this);  
  22.               
  23.             // If the title attribute is empty, continue with the next element  
  24.             if(!elem.attr('title')) return true;  
  25.               
  26.             // Creating new eventScheduler and Tip objects for this element.  
  27.             // (See the class definition at the bottom).  
  28.               
  29.             var scheduleEvent = new eventScheduler();  
  30.             var tip = new Tip(elem.attr('title'));  
  31.   
  32.             // Adding the tooltip markup to the element and  
  33.             // applying a special class:  
  34.               
  35.             elem.append(tip.generate()).addClass('colorTipContainer');  
  36.   
  37.             // Checking to see whether a supported color has been  
  38.             // set as a classname on the element.  
  39.               
  40.             var hasClass = false;  
  41.             for(var i=0;i<supportedColors.length;i++)  
  42.             {  
  43.                 if(elem.hasClass(supportedColors[i])){  
  44.                     hasClass = true;  
  45.                     break;  
  46.                 }  
  47.             }  
  48.               
  49.             // If it has been set, it will override the default color  
  50.               
  51.             if(!hasClass){  
  52.                 elem.addClass(settings.color);  
  53.             }  
  54.               
  55.             // On mouseenter, show the tip, on mouseleave set the  
  56.             // tip to be hidden in half a second.  
  57.               
  58.             elem.hover(function(){  
  59.   
  60.                 tip.show();  
  61.                   
  62.                 // If the user moves away and hovers over the tip again,  
  63.                 // clear the previously set event:  
  64.                   
  65.                 scheduleEvent.clear();  
  66.   
  67.             },function(){  
  68.   
  69.                 // Schedule event actualy sets a timeout (as you can  
  70.                 // see from the class definition below).  
  71.                   
  72.                 scheduleEvent.set(function(){  
  73.                     tip.hide();  
  74.                 },settings.timeout);  
  75.   
  76.             });  
  77.               
  78.             // Removing the title attribute, so the regular OS titles are  
  79.             // not shown along with the tooltips.  
  80.               
  81.             elem.removeAttr('title');  
  82.         });  
  83.           
  84.     }  
  85.   
  86.   
  87.     /* 
  88.     /   Event Scheduler Class Definition 
  89.     */  
  90.   
  91.     function eventScheduler(){}  
  92.       
  93.     eventScheduler.prototype = {  
  94.         set : function (func,timeout){  
  95.   
  96.             // The set method takes a function and a time period (ms) as  
  97.             // parameters, and sets a timeout  
  98.   
  99.             this.timer = setTimeout(func,timeout);  
  100.         },  
  101.         clear: function(){  
  102.               
  103.             // The clear method clears the timeout  
  104.               
  105.             clearTimeout(this.timer);  
  106.         }  
  107.     }  
  108.   
  109.   
  110.     /* 
  111.     /   Tip Class Definition 
  112.     */  
  113.   
  114.     function Tip(txt){  
  115.         this.content = txt;  
  116.         this.shown = false;  
  117.     }  
  118.       
  119.     Tip.prototype = {  
  120.         generate: function(){  
  121.               
  122.             // The generate method returns either a previously generated element  
  123.             // stored in the tip variable, or generates it and saves it in tip for  
  124.             // later use, after which returns it.  
  125.               
  126.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+  
  127.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));  
  128.         },  
  129.         show: function(){  
  130.             if(this.shown) return;  
  131.               
  132.             // Center the tip and start a fadeIn animation  
  133.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');  
  134.             this.shown = true;  
  135.         },  
  136.         hide: function(){  
  137.             this.tip.fadeOut();  
  138.             this.shown = false;  
  139.         }  
  140.     }  
  141.       
  142. })(jQuery);  

 


原文地址:http://www.freejs.net/article_jquerywenzi_479.html