<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;" οnclick=\'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" οnclick="test()"> <br/><br/>
<input id="mytxt1" value="请点击我1"/>
<textarea id="mytxt2" value="请点击我2"></textarea><br/><br/>
<input type="button" value="检测TipDiv是否存在" οnclick="alert( EasyTip.getTipDiv())"> <br/>
</body>