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>?