本插件是沿用了JTip的素材以及设计思路进行代码重写。拓展了以下功能:
1.增加了关闭按钮或者设置自动关闭间隔时间自动关闭
2.增加了多种调用方式,可以任意定位冒泡提示位置
jQuery.simpleTips = function(source,title,content,millisec){ title = title || ' 提示↓ '; var $source = (typeof(source)== 'object') ? $(source) : $('#'+source); $source.css('cursor','pointer'); var suffx = $source.attr('id') ? $source.attr('id') : new Date().getTime(); var jtipId = "Tip_" + suffx; var jtipContentId = "TipInner_" + suffx; var closeHTML = "<a href='javascript:void(0);' οnclick='$(this).parent().parent().remove();' class='tips-titlebar-close'><span class='tips-icon'></span></a>"; var thePos = $source.position(); var screenW = $(window).width(); var arrowW = 11; var tipContentW = 200; var showTipOnRight = (screenW - thePos.left - $source.width() - arrowW)>tipContentW; var tipX = 0; if(showTipOnRight){ $("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_left'></div><div class='Tip_close_left'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//right side var arrowOffset = $source.width() + arrowW; tipX = thePos.left + arrowOffset; //set x position }else{ $("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_right' style='left:"+tipContentW+"px'></div><div class='Tip_close_right'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//left side tipX = thePos.left - tipContentW - arrowW + 1; //set x position } $('#'+jtipId).css({left: tipX+"px", top: thePos.top+"px"}); $('#'+jtipId).fadeIn("slow"); $('#'+jtipContentId).html(content); if(millisec)setTimeout("jTipHide('" +jtipId+ "')",millisec); jTipHide = function(objectId){ $('#'+objectId).fadeOut("slow",function(){ $(this).remove(); }); } };
调用方法:
<input id="userNameID" name="userName" />
//将在id为userNameID元素产生提示,3秒自动隐藏
jQuery.simpleTips('userNameID','标题','提示内容',3000);
//将在id为userNameID元素产生提示,需要主动触发关闭按钮
jQuery.simpleTips('userNameID','标题','提示内容');
var target = document.getElementById('userNameID');
jQuery.simpleTips(target,'标题','提示内容');
$(":text").bind('blur',function(){
if(!isNaN( $(this).val())){
//
jQuery.simpleTips(this,'错误提示','必须为数字',3000);
$(this).val('');
}
});
推荐 :淘宝品牌店铺大全