jquery冒泡提示插件
本插件是沿用了JTip的素材以及设计思路进行代码重写。拓展了以下功能：1.增加了关闭按钮或者设置自动关闭间隔时间自动关闭
2.增加了多种调用方式，可以任意定位冒泡提示位置
jQuery.simpleTips = function(source,title,content,millisec){title = title || ' 提示↓&nbsp;';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);' onclick='$(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 sidevar 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 sidetipX = 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(''); } });
在线演示
推荐 ：淘宝品牌店铺大全
页:
[1]