引用

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

实现过程

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

最终要实现的效果：

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <!--css文件-->

     <link href="Colortip/styles.css" rel="stylesheet" />

     <link href="Colortip/colortip-1.0/colortip-1.0-jquery.css" rel="stylesheet" />

 </head>

 <body>

     <div style="text-align:center;margin-top:200px;"><a href="#" title="这是个大美女">美女</a></div>

     <div style="text-align:center;margin-top:250px;"><a href="#" title="这是个大美女" class="black">美女</a></div>

 </body>

 </html>

 <!--引入需要的js-->

 <script type="text/javascript" src="Script/jquery-1.11.0.js"></script>

 <script type="text/javascript" src="Colortip/colortip-1.0/colortip-1.0-jquery.js"></script>

 <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，就会提示错误。

[js插件]分享一个文章内容信息提示插件Colortip的更多相关文章

  1. 仿网易邮箱5.0(四)：信息提示插件(tips.js)

    信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...

  2. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  3. 自己写的一个简单的jQuery提示插件

    代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...

  4. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  5. windows下使用python的scrapy爬虫框架，爬取个人博客文章内容信息

    scrapy作为流行的python爬虫框架,简单易用,这里简单介绍如何使用该爬虫框架爬取个人博客信息.关于python的安装和scrapy的安装配置请读者自行查阅相关资料,或者也可以关注我后续的内容. ...

  6. 分享一个Visual Studio的背景插件，让堆码更富情趣

    忘记一件重要的事情,我使用的是VS 2012版,其他更高版本应该是可以找到的,以下版本就不清楚了.有可能找不到,见谅,也不是我开发的,只是偶尔碰到,拿出来让大家知道. 上周某日,新生命群里面还是一如既 ...

  7. 分享一个jQuery动态网格布局插件：Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  8. 分享一个废弃已久的插件架构 (.Net)

    框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...

  9. 今天再分享一个TextView内容风格化的类

    /* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...

随机推荐

  1. LSTM及其变种及其克服梯度消失

    本宝宝又转了一篇博文,但是真的很好懂啊: 写在前面:知乎上关于lstm能够解决梯度消失的问题的原因: 上面说到,LSTM 是为了解决 RNN 的 Gradient Vanish 的问题所提出的.关于 ...

  2. Codeforces 822C Hacker, pack your bags!(思维)

    题目大意:给你n个旅券,上面有开始时间l,结束时间r,和花费cost,要求选择两张时间不相交的旅券时间长度相加为x,且要求花费最少. 解题思路:看了大佬的才会写!其实和之前Codeforces 776 ...

  3. linux下redis的安装与部署

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  4. java EE ：Servlet 接口

    Servlet 生命周期  : 调用当前 Servlet 类构造函数进行实例化 Servlet 通过调用 init () 方法进行初始化 Servlet 调用 service() 方法来处理客户端的请 ...

  5. 洛谷P1528 切蛋糕 [搜索，二分答案]

    题目传送门 切蛋糕 题目描述 Facer今天买了n块蛋糕,不料被信息组中球球等好吃懒做的家伙发现了,没办法,只好浪费一点来填他们的嘴巴.他答应给每个人留一口,然后量了量每个人口的大小.Facer有把刀 ...

  6. springMVC+freemarker实现自定义标签

    在开发过程中,有些需要引用到重复的页面,或者动态的数据 修改数据库是可以实现,但是太麻烦了. freemarker自定义标签在开发中用途很广,就说个入门实例吧 基于springmvc. 首先需要导入对 ...

  7. 在ASP.NET中实现图片、视频文件上传方式

    一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 p ...

  8. SRPG Studio 教程(一) 创建游戏及引用素材

    儿时玩红白机的时候,火纹和机器人大战这类战棋类的游戏就是博主的最爱,恰逢最近steam上上架了一款SRPG Studio用于制作火纹,趁这个机会学习一下,顺便记录下来. 秉承着一个程序猿的自我修养,以 ...

  9. Knockout.js(四)：自定义绑定

    除了内嵌的绑定,还可以创建一些自定义绑定,封装复杂的逻辑或行为. 注册绑定 添加子属性到ko.bindingHandlers来注册绑定: ko.bindingHandlers.yourBindingN ...

  10. 【BZOJ 2510】 2510: 弱题 （矩阵乘法、循环矩阵的矩阵乘法）

    2510: 弱题 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 374  Solved: 196 Description 有M个球,一开始每个球均有一 ...