提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns:mudoo><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>POPHint 彈出提示框</title><style type="text/css"><!--* {padding: 0; margin: 0}body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}textarea {padding: 5px; line-height: 20px}p {margin: 1em 0}ul {}li {height: 1%; overflow: hidden; list-style-type: none}a {color: #666666; text-decoration: none}a:hover {color: #333333}.r {float: right}.l {float: left}.b {font-weight: bold}.gray {color: #666666; margin-top: 8px}.light {color:#FF6600; margin: 0 5px}.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}.call {display:block;}.key {display: block; width: 6em; float: left}.type {display: block; width: 6em; float: left}.info {padding-left: 2em}.demo {margin-bottom: 2em}/* popHint Style */#popHint {position: absolute; line-height: normal}#popHint .popLeft, #popHint .popRight, #popHint .popAngle span, #popHintText, #popHint .popIcon {background-image: url(yun_qi_img/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 {}#popHint .wrong .popIcon {background-position: 0 -90px; background-repeat: no-repeat}#popHint .right {font-weight: bold}#popHint .right .popIcon {background-position: 0 -105px; background-repeat: no-repeat}/* 這裡可以自己擴充表徵圖.(15*10) */--></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[i]);}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[i].node == node && eventListeners[i].event == event && eventListeners[i].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[index];delete eventListeners[index];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[i] != undefined){removeEventListenerIndex(i);}}};--></script><script language="javascript" type="text/javascript"><!--/*********************************************- POPHint 彈出提示框- By Mudoo 2008.5**********************************************/function popHint(obj, msg, inits) {var_obj = $(obj),_objHint = $("popHint"),_msg = msg,_init = inits;// 初始化失敗...if(_obj==undefined || _msg==undefined || _msg=="") return;_init = _init==undefined ? {} : _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,_intDo= null,_objText = $("popHintText"),// 初始化init = function() {var _hint = _obj.getAttribute("hint");if(_hint=="false") return;// 預設初始值..._type= _init._type==undefined ? "wrong" : _init._type;_type= _type.toLowerCase();_event= _init._event==undefined ? "click" : _init._event;_event= _event.toLowerCase();_time= _init._time==undefined ? 0 : _init._time;_time= parseInt(_time);if(_objHint==null) {/*******************************************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>"_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"></span>"+ _msg;_objText.className = _type;_objText.innerHTML = _msg;_objHint.style.left = _place.x +"px";_objHint.style.top = (_place.y-_marTop+8) +"px";if(_time>0) _intDo = setTimeout(hide, _time);// 關閉觸發事件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);clearTimeout(_intDo);};init();}--></script><script language="javascript" type="text/javascript"><!--/********************************************* - popHint 示範函數*********************************************/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也一樣...');$('Test5').value='也填一點進去...';return false;}popHint($('btnTest'), '不錯不錯.都填完了.表揚一下下.', {_type : "right"});}--></script></head><body><div class="case"><div class="title">ToppopHint 調用方法(只支援單行)</div><div class="b">popHint(Element, Hint, {Type, Event, Time});</div><ul class="info gray"><li><span class="key">Element：</span><span class="type">Object</span>彈出對象。根據它來定位的。 (*必須)</li><li><span class="key">Hint：</span><span class="type">String</span>彈出的資訊，支援HTML可是不能換行。 (*必須)</li><li><span class="key">Type：</span><span class="type">String</span>彈出類型。其實說類型是不對的。只是定義個表徵圖而已...(可自己在樣式裡加很多很多"類型") (*可選,預設為wrong)</li><li><span class="key">Event：</span><span class="type">String</span>關閉觸發事件(預設click=document.onmousedown,blur=Element.onblur) (*可選)</li><li><span class="key">Time：</span><span class="type">String</span>關閉計時，設定>0有效 (*可選)</li></ul></div><div class="case"><div class="title">ToppopHint 示範</div><ul class="demo gray"><li><span class="key">blur不關閉：</span><input name="Test1_0" id="Test1_0" type="text" size="40" maxlength="20" onfocus="popHint(this, '失去焦點不會關閉提示.按TAB鍵看看');" value="" /> </li><li><span class="key">blur關閉：</span><input name="Test1_1" id="Test1_1" type="text" size="40" maxlength="20" onfocus="popHint(this, '文字框失去焦點就關閉.再按TAB鍵看看', {_event : 'blur'});" value="" /> </li><li><span class="key">計時關閉：</span><input name="Test1_2" id="Test1_2" type="text" size="40" maxlength="20" onfocus="popHint(this, '別動！倆秒後我就消失.', {_event : 'blur', _time : 2000});" value="" /> </li></ul><ul class="demo gray"><li><span class="key">Test2：</span><input name="Test2" id="Test2" type="text" size="40" maxlength="20" value="" /></li><li><span class="key">Test3：</span><input name="Test3" id="Test3" type="text" size="40" maxlength="20" value="" /></li><li><span class="key">Test4：</span><input name="Test4" id="Test4" type="hidden" value="" /></li><li><span class="key">Test5：</span><input name="Test5" id="Test5" type="text" size="40" maxlength="20" value="" /></li><li><input name="btnTest" id="btnTest" type="button" onclick="testPopHint();" value="來測試啦" /></li></ul></div></body></html>
提示：您可以先修改部分代碼再運行
