当前位置: 代码迷 >> Web前端 >> jquery冒泡揭示插件
  详细解决方案

jquery冒泡揭示插件

热度:552   发布时间:2012-10-21 09:00:07.0
jquery冒泡提示插件

本插件是沿用了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
3 楼 vakin.jiang 2011-02-27  
hellojinjie 写道
有个小bug 哦..
快速的连续点击右边的那个按钮,会同时出现两个 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下面!!!
12 楼 shichuanliujie 2011-03-14  
不能用,下载包,在线演示可以
13 楼 Enjoy_show 2011-03-15  
xiangkun 写道
好丑啊....!!!   
IE7下面!!!

确实有点丑 没有尝试其他浏览器 不知道如何
  相关解决方案