<!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));
},
// 生成元素到refNode
appendElement = 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);
}
}
};
/*********************************************
- 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" onfocus="popHint(this, '失去焦點不會關閉提示.按TAB鍵看看');" value="" />
blur不觸發關閉<a href="###"> </a>
<br />
測試blur關閉：<input name="Test1_1" id="Test1_1" type="text" size="20" maxlength="20" onfocus="popHint(this, '文本框失去焦點就關閉.', {_event : 'blur'});" 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" onclick="testPopHint();" value="測試" />
</div>
</body>
</html>