[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 elementif(!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 colorif(!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 timeoutthis.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 animationthis.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，就会提示错误。

转载于:https://www.cnblogs.com/wolf-sun/p/3583313.html

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

流行的jQuery信息提示插件(jQuery Tooltip Plugin)
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning, by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好,会 ...
流行的jQuery信息提示插件(jQuery Tooltip Plugin)【转】
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning , by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好, ...
记录--浏览器插件分享（视频倍速播放插件）
记录–浏览器插件分享(视频倍速播放插件) 最近看视频的时候偶然有发现视频倍速播放的几个方法,跟大家分享一下. 第一种这种是最简单的,我们直接使用火狐浏览器就可以倍速播放视频. 如下图,在视频加载好后 ...
【Unity3D插件】uMOBA插件分享《Moba类游戏框架插件》
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 一.前言今天介绍一款MOBA游戏的插件,已经有一个雏形了,可以作为开发的模 ...
插件分享 | 可以连续导入的Censys插件
前言:用Goby也有一段时间了,挺喜欢Goby的界面,而且个人感觉Goby的插件也挺有趣,在看见github上有几个插件需求后,也想给社区提点东西,就有了本次的Censys插件.由于没怎么用过Cens ...
组织结构图插件_一个简单直接的组织结构图插件
组织结构图插件 Vue-orgchart (vue-orgchart) It's a simple and direct organization chart plugin. Anytime you ...
立方体html与js特效,分享一个HTML立方体插件 JSCube v1.7
JSCube是一个立方体插件,完全用JS和CSS实现,支持所有主流浏览器.通过它可以创建一个立方体,并将6个HTML元素贴在其面上,支持旋转和缩放. 与其他类似特效不同,本程序可以把任意HTML元素贴 ...
分享一个监控MFS的nagios插件
最近线上刚好有监控MFS服务器的需求,本来准备自己完全写一个nagios插件出来的,但是又懒不想写就搜了一下,还真有网友分享出来了.他的连接地址是:http://blog.csdn.net/liuyu ...
分享一个Visual Studio的背景插件，让堆码更富情趣
忘记一件重要的事情,我使用的是VS 2012版,其他更高版本应该是可以找到的,以下版本就不清楚了.有可能找不到,见谅,也不是我开发的,只是偶尔碰到,拿出来让大家知道. 上周某日,新生命群里面还是一如既 ...

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

引用

实现过程

总结

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

最新文章

热门文章