`
accpxudajian
  • 浏览: 452495 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

EasyTip 简单Tip提示窗口

 
阅读更多 

<script src="JSLogger.js" debug="true"></script>

<script>
/*组件说明：
	当前适用于给文本框添加注释说明，主要用在表单验证的时候提示错误信息
	思路简介：	1 给文本框添加click事件监听。
				2 当文本框click的时候，根据当前文本框的坐标信息打印 tip窗口
				3 给tip窗口添加mouseout方法，当光标移出tip窗口的时候，销毁tip窗体
*/
	function test(){
		var txt1 = document.getElementById("mytxt1");
		EasyTip.bindDom(txt1,"第一个文本框提示");
		var txt2 = document.getElementById("mytxt2");
		EasyTip.bindDom(txt2,"第二个文本框提示",300,"150px");/*宽度和高度  输入数字或者字符px都可以 */
	}
	
	var EasyTip={
			/*
				初始化窗口组件
				@param msg 显示的信息
				@param x,y  X坐标和Y坐标
				@param 当光标移动出道窗口意外后，窗口销毁。
			*/
			init:function(msg,x,y,w,h){
				JSLogger.log("init");
				if(typeof(x)=="undefined"){
					var e = window.event;
					x = e.clientX;
					y = e.clientY;
				}
				
				if(typeof(w)=="undefined"){w=200;}
				//统一添加px元素
				
				x = (x+"").split("px")[0]+"px";
				y = (y+"").split("px")[0]+"px";
				w = (w+"").split("px")[0]+"px";
				var tipDiv = document.createElement("div");
				
				tipDiv.setAttribute("id","Easy_Tip_Div");
				tipDiv.style.width=w;
				
				tipDiv.style.zIndex="100";

				if(typeof(h)!="undefined"){
					h = (""+h).split("px")[0]+"px";
					tipDiv.style.height=h;
				}
				tipDiv.style.border="1px solid gray";
				tipDiv.style.position="absolute";
				tipDiv.style.background="white";/*背景色 */
				tipDiv.style.margin="4 0 0 0";
				tipDiv.style.left=x;
				tipDiv.style.top=y;
				var html ="<div style='background:gray;text-align:right;padding-right:4px;font-family:arial;cursor:move;'>";
					html+='<span style="cursor:pointer;" onclick=\'EasyTip.remove()\'>X</span></div>';
					html+=("<div id='Easy_Tip_Con'>"+msg+"</div>");
				tipDiv.innerHTML=html;
				
				document.body.appendChild(tipDiv);
				EasyTip.addLisener(tipDiv,"mouseout",EasyTip.removeAction);
			},
			getTipDiv : function(){
				var tipDiv = document.getElementById("Easy_Tip_Div");
				return tipDiv;
			},
			remove : function(){
				var tipDiv = EasyTip.getTipDiv();
				if(tipDiv==null){return;}
				document.body.removeChild(tipDiv);
			},
			removeAction : function(){/*窗口销毁方法*/
					JSLogger.log("remove action")
					var e = window.event;
					var ex = e.clientX;
					var ey = e.clientY;
					var tipDiv = EasyTip.getTipDiv();
					if(tipDiv==null){return;}
					var x = tipDiv.offsetLeft;
					var y = tipDiv.offsetTop;
					var w = tipDiv.clientWidth;
					var h = tipDiv.clientHeight;
					
					//JSLogger.log("tipdiv .x=="+x+",y="+y+",w="+w+",h="+h);
					//通过坐标值进行判断是否隐藏
					if(ex<x || ex>x+w || ey<y || ey>y+h){
						EasyTip.remove();
					}
			},
			/*
				绑定表单元素的方法
				@param domObj 表单元素对象
				@param msg tip窗口显示的信息
				@param w 宽度 可省略 则等于当前元素宽度
				@param h  高度 可省略 
			*/
			bindDom : function(domObj,msg,w,h){
				var x = domObj.offsetLeft;
				var y = domObj.offsetTop+domObj.clientHeight;
				if(typeof(w)=="undefined"){w=domObj.clientWidth+"px";}
				//JSLogger.log("bindDom>> x="+x+",y="+y+",msg="+msg+",w="+w+",h="+h);
				EasyTip.addLisener(domObj,"click",function(){EasyTip.init(msg,x,y,w,h);});//
				
			},
			addLisener : function(domObj,action,fun){
				JSLogger.log("addLisener> action="+action);
				if(domObj.addEventListener){
					JSLogger.log("not IE,action=="+action);
					domObj.addEventListener (action,fun);
				}else{
					action = "on"+action;
					JSLogger.log("IE"+",action="+action);
					domObj.attachEvent (action,fun);
				}
			}
	}
	
</script>
<body><br/>
1、点击注册按钮<br/>
2、点击文本框<br/><br/><br/>
	<input type="button" value="注册TipDiv" onclick="test()"> <br/><br/>
	
	<input id="mytxt1" value="请点击我1"/>
	<textarea id="mytxt2" value="请点击我2"></textarea><br/><br/>
<input type="button" value="检测TipDiv是否存在" onclick="alert( EasyTip.getTipDiv())"> <br/>
</body>
 
  • 大小: 79.4 KB
分享到：
| css小结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics