本插件是沿用了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);' 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 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(''); } });?
?
在线演示
?
推荐 :淘宝品牌店铺大全
1 楼
liuyes
2011-02-27
效果还不错,比较实用
2 楼
hellojinjie
2011-02-27
有个小bug 哦..
快速的连续点击右边的那个按钮,会同时出现两个 tip
快速的连续点击右边的那个按钮,会同时出现两个 tip
3 楼
vakin.jiang
2011-02-27
hellojinjie 写道
有个小bug 哦..
快速的连续点击右边的那个按钮,会同时出现两个 tip
快速的连续点击右边的那个按钮,会同时出现两个 tip
这个问题还真没处理
4 楼
ka520888
2011-03-01
先拜读下...作者有QQ没....向你学习学习
5 楼
crkzaijava
2011-03-01
那个 ,把CSS文件写在jquery.simpleTips-1.0.js里面 好点,我觉得,就不用单独弄个CSS文件了。
6 楼
lkfs
2011-03-01
mark jquery冒泡提示插件
7 楼
zygege
2011-03-01
此插件及国外著名插件cluetips,作者系抄袭。希望停止抄袭,或声明抄袭行为。
8 楼
vakin.jiang
2011-03-01
zygege 写道
此插件及国外著名插件cluetips,作者系抄袭。希望停止抄袭,或声明抄袭行为。
我第一行就有相关说明,别乱喷,谢谢!!
附:http://codylindley.com/blogstuff/js/jtip/
9 楼
zui4yi1
2011-03-01
下载包是什么东东,不能运行?
10 楼
vakin.jiang
2011-03-01
zui4yi1 写道
下载包是什么东东,不能运行?
juery库文件没有打进去,你在index.html重新引用一下jquery库文件就行了
11 楼
xiangkun
2011-03-03
好丑啊....!!!
IE7下面!!!
IE7下面!!!
12 楼
shichuanliujie
2011-03-14
不能用,下载包,在线演示可以
13 楼
Enjoy_show
2011-03-15
xiangkun 写道
好丑啊....!!!
IE7下面!!!
IE7下面!!!
确实有点丑 没有尝试其他浏览器 不知道如何