很有特色的必填字段警告筐

2009-12-24 警告對話 ℃

<!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=gb2313" />
<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(/icon/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不為空.但是只設置一個值...避免發(fā)所錯誤.再次設置初始值...
		_type = _init._type==undefined ? "wrong" : _init._type;
		_type = _type.toLowerCase();
		_event = _init._event==undefined ? "click" : _init._event;
		_event = _event.toLowerCase();
		
		/*
		******************************************
		popHtml
		******************************************
		<div   class="xwpsrgx"   id="popHint">
			<div   class="pn9cujx"   id="popHeader">
				<div   id="zzocrft"   class="popLeft"></div>
				<div   class="gc9meth"   id="popHintText"><span id="ieulcob"    class=\"popIcon wrong></span>請輸入您的用戶名！</div>
				<div   id="k7p4br7"   class="popRight"></div>
			</div>
			<div   id="m2sw7fm"   class="popAngle"><span></span></div>
		</div>
		*/
		
		// 好了.輸出...
		var _Html = "<div   class="4lfyoly"   id=\"popHeader\">" +
					"	<div   id="p2vc7xo"   class=\"popLeft\"></div>" +
					"	<div   class="yvmcvgy"   id=\"popHintText\"></div>" +
					"	<div   id="76wa47o"   class=\"popRight\"></div>" +
					"</div>"+
					"<div   id="sqdqjas"   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 id="t7aoet9"    class=\"popIcon "+ _type +"\"></span>"+ _msg;
		_objText.innerHTML = _msg;
		
		_objHint.style.left = _place.x +"px";
		_objHint.style.top = (_place.y-_marTop+8) +"px";
		
		// 關閉觸發(fā)事件
		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 = "";
		// 移除關閉觸發(fā)事件
		myRemoveEventListener(_obj, 'blur', hide);
		myRemoveEventListener(document, 'mousedown', hide);
	};
	
	init();
}

/*********************************************
  - 這里是測試函數
*********************************************/
function testPopHint() {
	if($('Test2').value==''){
		popHint($('Test2'), '用戶名不能為空...', {_event : 'blur'});
		$('Test2').focus();
		return false;
	}
	if($('Test3').value==''){
		popHint($('Test3'), '密碼也不能為空...', 'blur');
		$('Test3').focus();
		return false;
	}
}

-->
</script>
</head>

相關特效代碼

熱門特效代碼: 網頁自動跳轉代碼; 檢測用戶來自哪里; 不同時間段顯示不同問候語; 很有特色的必填字段警告筐; 禁用鼠標左鍵; 右鍵激活收藏夾; 限制文件上傳類型的代碼; 鼠標激活對話筐代碼; 檢測用戶瀏覽器所裝插件數; 你絕對沒見過的警告窗口

推薦特效代碼: 右鍵激活收藏夾; 禁用鼠標左鍵; 不同時間段顯示不同問候語; 你絕對沒見過的警告窗口; 網頁自動跳轉代碼; 添加到收藏夾代碼