POPHint 弹出提示框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>POPHint 弹出提示框</title><style type="text/css"><!--body {margin: 3em; font: 12px "宋体"; background: #EAEAEA}input {font: 12px "宋体"; color: #666666}.case {padding: 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 3em; line-height: 150%}a {color: #666666; text-decoration: none}a:hover {color: #333333}/* popHint Start */#popHint {position: absolute}#popHint .popLeft, #popHint .popRight, #popHint .popAngle span, #popHintText, #popHint .popIcon {background-image: url(http://i.namipan.com/files/48ee6e2804bb4b1d84ecea96218e4a50081349ba960100008f09/0/PopHint.gif)}#popHint .popHeader {height: 1%; overflow: hidden !important; overflow /**/: visible} #popHint .popLeft {float: left; width: 5px; height: 24px; background-position: 0 0; background-repeat: no-repeat} #popHint .popRight {float: left; width: 5px; height: 24px; background-position: -10px -25px; background-repeat: no-repeat} #popHint .popAngle {clear: both; position: relative; height: 10px} #popHint .popAngle span {position: absolute; top: -3px; left: 15px; width: 7px; height: 13px; background-position: 0 -75px; background-repeat: no-repeat}#popHintText {float: left; color: #975400; height: 19px !important; height /**/: 24px; padding: 5px 0 0 0; white-space: nowrap; background-position: 0 -50px; background-repeat: repeat-x; overflow: hidden} #popHintText .popIcon {float: left; width: 15px; height: 10px; margin: 1px 3px 0 0} #popHint .wrong {background-position: 0 -90px; background-repeat: no-repeat} #popHint .right {background-position: 0 -105px; background-repeat: no-repeat} /* 这里可以自己扩展图标.(15*10) *//* popHint End */--></style><script language="javascript" type="text/javascript"><!--// 这里都是公用函数，挺多的...var// 获取元素$ = function(element) { return (typeof(element) == 'object' ? element : document.getElementById(element));},// 生成元素到refNodeappendElement = function(tagName, Attribute, strHtml, refNode) { var cEle = document.createElement(tagName); // 属性值 for (var i in Attribute){ cEle.setAttribute(i, Attribute); } cEle.innerHTML = strHtml; refNode.appendChild(cEle); return cEle;},// 获取元素坐标getCoords = function(node){ var x = node.offsetLeft; var y = node.offsetTop; var parent = node.offsetParent; while (parent != null){ x += parent.offsetLeft; y += parent.offsetTop; parent = parent.offsetParent; } return {x: x, y: y};},// 事件操作(可保留原有事件)eventListeners = [],findEventListener = function(node, event, handler){ var i; for (i in eventListeners){ if (eventListeners.node == node && eventListeners.event == event && eventListeners.handler == handler){ return i; } } return null;},myAddEventListener = function(node, event, handler){ if (findEventListener(node, event, handler) != null){ return; } if (!node.addEventListener){ node.attachEvent('on' + event, handler); }else{ node.addEventListener(event, handler, false); } eventListeners.push({node: node, event: event, handler: handler});},removeEventListenerIndex = function(index){ var eventListener = eventListeners; delete eventListeners; if (!eventListener.node.removeEventListener){ eventListener.node.detachEvent('on' + eventListener.event, eventListener.handler); }else{ eventListener.node.removeEventListener(eventListener.event, eventListener.handler, false); }},myRemoveEventListener = function(node, event, handler){ var index = findEventListener(node, event, handler); if (index == null) return; removeEventListenerIndex(index);},cleanupEventListeners = function(){ var i; for (i = eventListeners.length; i > 0; i--){ if (eventListeners != undefined){ removeEventListenerIndex(i); } }}; /********************************************* - POPHint 弹出提示框 - By Mudoo 2008.5**********************************************/function popHint(obj, msg, initValues) { var _obj = $(obj), _objHint = $("popHint"), _msg = msg, _init = initValues; // 初始化失败... if(_obj==undefined || _msg==undefined || _msg=="") return; // 设置初始值 _init = _init==undefined ? {_type : "wrong", _event : "click"} : _init; // obj如果不可见。设置弹出对象为obj父元素 if(_obj.style.display=='none' || _obj.style.visibility=='hidden' || _obj.getAttribute('type')=='hidden') _obj = _obj.parentNode; var _type = null, _event = null, _place = getCoords(_obj), _marTop = null, _objText = $("popHintText"), // 初始化 init = function() { _hint = _obj.getAttribute("hint"); if(_hint=="false") return; // 有的时候initValues不为空.但是只设置一个值...避免发所错误.再次设置初始值... _type = _init._type==undefined ? "wrong" : _init._type; _type = _type.toLowerCase(); _event = _init._event==undefined ? "click" : _init._event; _event = _event.toLowerCase(); /* ****************************************** popHtml ****************************************** <div id="popHint"> <div id="popHeader"> <div class="popLeft"></div> <div id="popHintText"><span class=\"popIcon wrong></span>请输入您的用户名！</div> <div class="popRight"></div> </div> <div class="popAngle"><span></span></div> </div> */ // 好了.输出... var _Html = "<div id=\"popHeader\">" + " <div class=\"popLeft\"></div>" + " <div id=\"popHintText\"></div>" + " <div class=\"popRight\"></div>" + "</div>"+ "<div class=\"popAngle\"><span></span></div>" if(_objHint==null) { _objHint = appendElement("div", {"id" : "popHint"}, _Html, document.body); _objHint.style.display = "none"; _objText = $("popHintText"); } show(); }, // 显示 show = function() { _objHint.style.display = ""; _marTop = _objHint.offsetHeight; _msg = "<span class=\"popIcon "+ _type +"\"></span>"+ _msg; _objText.innerHTML = _msg; _objHint.style.left = _place.x +"px"; _objHint.style.top = (_place.y-_marTop+8) +"px"; // 关闭触发事件 switch(_event) { case "blur" : myAddEventListener(_obj, 'blur', hide); break; //default : case "click" : myAddEventListener(document, 'mousedown', hide); break; //这里可以自己扩展很多事件... } }, // 关闭 hide = function() { _objHint.style.display = "none"; _objText.innerHTML = ""; // 移除关闭触发事件 myRemoveEventListener(_obj, 'blur', hide); myRemoveEventListener(document, 'mousedown', hide); }; init();} /*********************************************- 这里是测试函数*********************************************/function testPopHint() { if($('Test2').value==''){ popHint($('Test2'), 'Test2不能为空...', {_event : 'blur'}); $('Test2').focus(); return false; } if($('Test3').value==''){ popHint($('Test3'), 'Test3也不能为空...', 'blur'); $('Test3').focus(); return false; } if($('Test4').value==''){ popHint($('Test4'), 'Test4虽然看不见,但也不能为空...'); $('Test4').value='填一点进去...'; return false; } if($('Test5').value==''){ popHint($('Test5'), 'Test5也一样...'); return false; }}--></script></head><body><div class="case"> 好了.可以继续了. 接下来调用方法.<br /> ===========================================================<br /> popHint(Element, Hint, {Type, Event});<br /> ===========================================================<br /> Element：弹出对象。根据它来定位的。<br /> Hint：弹出的信息。<br /> Type：弹出类型。其实说类型是不对的。只是定义个图标而已...(可自己在样式里加很多很多"类型")<br /> Event：关闭触发事件。(默认click=document.onmousedown,blur=Element.onblur) 一样可以自己定义很多事件.</div> <div class="case"> 测试：<input name="Test1_0" id="Test1_0" type="text" size="20" maxlength="20"value="" /> blur不触发关闭<a href="###"> </a> <br /> 测试blur关闭：<input name="Test1_1" id="Test1_1" type="text" size="20" maxlength="20"value="" /></div><div class="case"> <div>Test2：<input name="Test2" id="Test2" type="text" size="20" maxlength="20" value="" /></div> <div>Test3：<input name="Test3" id="Test3" type="text" size="20" maxlength="20" value="" /></div> <div>Test4：<input name="Test4" id="Test4" type="hidden" size="20" maxlength="20" value="" /></div> <div>Test5：<input name="Test5" id="Test5" type="text" size="20" maxlength="20" value="" style="display:none" /></div> <input name="" type="button"value="测试" /></div></body></html>
页:
[1]