引用
项目中需要一个信息提示的功能，就上网找了一个插件，发现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，就会提示错误。
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 转载：http://www.cnblogs.com/wolf-sun/p/3583313.html |
时间： 2025-01-01 16:03:31