[js插件]分享一个文章内容信息提示插件Colortip

引用

项目中需要一个信息提示的功能，就上网找了一个插件，发现colortip实现比较简单，就定了这个插件。

实现过程

官网：http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/

最终要实现的效果：

colortip是将标签中的title属性的值弹出显示的，默认情况是黄色的：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <!--css文件-->
 7     <link href="Colortip/styles.css" rel="stylesheet" />
 8     <link href="Colortip/colortip-1.0/colortip-1.0-jquery.css" rel="stylesheet" />
 9 </head>
10 <body>
11     <div style="text-align:center;margin-top:200px;"><a href="#" title="这是个大美女">美女</a></div>
12     <div style="text-align:center;margin-top:250px;"><a href="#" title="这是个大美女" class="black">美女</a></div>
13 </body>
14 </html>
15 <!--引入需要的js-->
16 <script type="text/javascript" src="Script/jquery-1.11.0.js"></script>
17 <script type="text/javascript" src="Colortip/colortip-1.0/colortip-1.0-jquery.js"></script>
18 <script type="text/javascript" src="Colortip/script.js"></script>

效果：

 通过查看这些设置，是在colortip-1.0-jquery.js文件中进行配置的：

(function($){
    $.fn.colorTip = function(settings){

        var defaultSettings = {
            color        : 'yellow',//默认颜色
            timeout        : 500
        }
        
        var supportedColors = ['red','green','blue','white','yellow','black'];//总共有6种主题的颜色
        
        /* Combining the default settings object with the supplied one */
        settings = $.extend(defaultSettings,settings);

        /*
        *    Looping through all the elements and returning them afterwards.
        *    This will add chainability to the plugin.
        */
        
        return this.each(function(){

            var elem = $(this);
            
            // If the title attribute is empty, continue with the next element
            if(!elem.attr('title')) return true;
            
            // Creating new eventScheduler and Tip objects for this element.
            // (See the class definition at the bottom).
            
            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));

            // Adding the tooltip markup to the element and
            // applying a special class:
            
            elem.append(tip.generate()).addClass('colorTipContainer');

            // Checking to see whether a supported color has been
            // set as a classname on the element.
            
            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }
            
            // If it has been set, it will override the default color
            
            if(!hasClass){
                elem.addClass(settings.color);
            }
            
            // On mouseenter, show the tip, on mouseleave set the
            // tip to be hidden in half a second.
            
            elem.hover(function(){

                tip.show();
                
                // If the user moves away and hovers over the tip again,
                // clear the previously set event:
                
                scheduleEvent.clear();

            },function(){

                // Schedule event actualy sets a timeout (as you can
                // see from the class definition below).
                
                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);

            });
            
            // Removing the title attribute, so the regular OS titles are
            // not shown along with the tooltips.
            
            elem.removeAttr('title');
        });
        
    }


    /*
    /    Event Scheduler Class Definition
    */

    function eventScheduler(){}
    
    eventScheduler.prototype = {
        set    : function (func,timeout){

            // The set method takes a function and a time period (ms) as
            // parameters, and sets a timeout

            this.timer = setTimeout(func,timeout);
        },
        clear: function(){
            
            // The clear method clears the timeout
            
            clearTimeout(this.timer);
        }
    }


    /*
    /    Tip Class Definition
    */

    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }
    
    Tip.prototype = {
        generate: function(){
            
            // The generate method returns either a previously generated element
            // stored in the tip variable, or generates it and saves it in tip for
            // later use, after which returns it.
            
            return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));//显示的消息提示框是一个span标签
        },
        show: function(){
            if(this.shown) return;
            
            // Center the tip and start a fadeIn animation
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            this.tip.fadeOut();
            this.shown = false;
        }
    }
    
})(jQuery);

通过该js文件，可见该插件主要是在title属性中设置显示信息的。

总结

colortip用起来还是非常简单的，在想要提示信息的地方加个带title属性的a标签就可以了，不过有点差强人意的地方，如果其他的标签例如按钮，加一个title，就会提示错误。 

posted @ 2014-03-05 20:45  wolfy  阅读(2035)  评论(1)  编辑  收藏  举报