当前位置: 代码迷 >> JavaScript >> Javascript 交付时的消息或提示窗口
  详细解决方案

Javascript 交付时的消息或提示窗口

热度:166   发布时间:2012-11-03 10:57:42.0
Javascript 提交时的消息或提示窗口
花了一段时间完成的,JS源代码如下:

var msgObj;
function showMessage(message, url, headImageType) {
	if(message!=null && message!=''){
		msgObj = new MessageObj(message, url, headImageType, true);
		msgObj.show();
	}else{
		msgObj = null;
	}
}

function loadingMessage(count, message, headImageType, isClose) {
	msgObj = new MessageObj(message, null, headImageType, isClose);
	msgObj.waiting(count);
}


var show_message_loading_image = new Array();
show_message_loading_image[0] = 'image/13221814.gif';
show_message_loading_image[1] = 'image/05043130.gif';
show_message_loading_image[2] = 'image/13221818.gif';
show_message_loading_image[3] = 'image/13221815.gif';

var show_message_Head_image = new Array();
show_message_Head_image['warn'] = 'image/error.png';
show_message_Head_image['accept'] = 'image/accept.png';
show_message_Head_image['info'] = 'image/information.png';
show_message_Head_image['error'] = 'image/exclamation.png';
show_message_Head_image['help'] = 'image/help.png';
show_message_Head_image['star'] = 'image/star.png';
show_message_Head_image['stop'] = 'image/stop.png';
show_message_Head_image['new'] = 'image/new.png';

function MessageObj(message, url, headImageType, isClose){
	this.message = (message==null||message=='') ? " Waiting…" : message;
	this.url = (url==null||url=='') ? null : url;
	this.isClose = (isClose==null) ? false : isClose;
	this.body = document.getElementById('body');
	this.msg = this.createDiv("message_show", "message_show");
	this.msgBg = this.createDiv("message_bg", "message_bg");
	this.msgMain = this.createDiv("message_main", "message_main");
	this.msgMainBody = this.createDiv("message_body", "message_body");
	this.msgMainHead = this.createDiv("message_head", "message_head");
	this.msgMainFoot = this.createDiv("message_foot", "message_foot");
	this.loading_image = show_message_loading_image;
	if(headImageType!=null){
		this.headImage =  show_message_Head_image[headImageType];
	}else{
		this.headImage =  show_message_Head_image['warn'];
	}
	if(isClose){
		this.closeImg = this.createCloseImage();
		this.closeButton = this.createButton();
	}
}

MessageObj.prototype.show = function() {
	if (this.message!=null && this.message!='') {
		if(this.isClose){
			this.msgMainHead.appendChild(this.closeImg);
			this.msgMainFoot.appendChild(this.closeButton);
		}
		this.msgMainHead.appendChild(this.createImage(this.headImage, "head_type", ""));
		var span = document.createElement("span");
		span.className = "span";
		span.appendChild(this.createText());
		this.msgMainHead.appendChild(span);
		this.msgMainBody.appendChild(this.createText(this.message, true));
		this.msgMain.appendChild(this.msgMainHead);
		this.msgMain.appendChild(this.msgMainBody);
		this.msgMain.appendChild(this.msgMainFoot);
		this.msg.appendChild(this.msgBg);
		this.msg.appendChild(this.msgMain);
		this.body.parentNode.insertBefore(this.msg, this.body);
		msgObj.center();
	}
}



MessageObj.prototype.waiting = function (count) {
	var image ;
	if(count==null||count<0||count>this.loading_image.length){
		image = this.loading_image[0];
	}else{
		image = this.loading_image[count];
	}
	this.msgMainBody.appendChild(this.createImage(image, "", " Waiting..."));
	if(this.isClose){
		this.msgMainHead.appendChild(this.closeImg);
		this.msgMainFoot.appendChild(this.closeButton);
	}
	this.msgMainHead.appendChild(this.createImage(this.headImage, "head_type", ""));
	var span = document.createElement("span");
	span.className = "span";
	span.appendChild(this.createText());
	this.msgMainHead.appendChild(span);
	span = document.createElement("span");
	span.className = "span";
	span.appendChild(this.createText(this.message, true));
	this.msgMainBody.appendChild(span);
	this.msgMain.appendChild(this.msgMainHead);
	this.msgMain.appendChild(this.msgMainBody);
	this.msgMain.appendChild(this.msgMainFoot);
	this.msg.appendChild(this.msgBg);
	this.msg.appendChild(this.msgMain);
	this.body.parentNode.insertBefore(this.msg, this.body);
	msgObj.center();
}



MessageObj.prototype.createDiv = function (id, className) {
	var div = document.createElement("div");
	div.setAttribute("id", id);
	div.className = className;
	return div;
}


MessageObj.prototype.createImage = function (src, className, alt) {
	var img = document.createElement("img");
	img.setAttribute("src", src);
	img.className = className;
	img.setAttribute("alt", alt);
	return img;
}

MessageObj.prototype.createCloseImage = function() {
	var img = document.createElement("img");
	img.setAttribute("src","image/login_close.gif");
	img.setAttribute("alt", "Close");
	img.className = "close";
	img.onclick = function() {
		if (msgObj.url == null) {
			msgObj.close();
		} else {
			location = msgObj.url;
		}
	};
	return img;
}

MessageObj.prototype.createButton = function() {
	var button = document.createElement("button");
	button.setAttribute("id", "show_message_colse_button");
	button.setAttribute("type", "button");
	button.onclick = function() {
		if (msgObj.url == null) {
			msgObj.close();
		} else {
			location = msgObj.url;
		}
	};
	button.appendChild(this.createText("OK"));
	return button;
}

MessageObj.prototype.close = function() {
	var massage_show = document.getElementById("message_show");
	if (massage_show != null) {
		massage_show.parentNode.removeChild(massage_show);
	}
}

MessageObj.prototype.createText= function(messageText, isHtml) {
	if (messageText == null) {
		messageText = "Message: ";
	}
	if(true == isHtml){
		var span = document.createElement('span');
		span.innerHTML = messageText;
		return span;
	}else{
		return document.createTextNode(messageText);
	}
}

MessageObj.prototype.full_show = function() {
	var msg = document.getElementById('message_show');
	msg.style.height = document.body.scrollHeight;
	msg.style.width = document.body.scrollWidth;
}

MessageObj.prototype.centerHeight = function() {
	var msgMain = document.getElementById('message_main');
	if(msgMain!=null){
		var msgMainBody = document.getElementById('message_body');
		var msgMainFoot = document.getElementById('message_foot');
		var msgMainBodyHeight = msgMainBody.offsetHeight;
		if (msgMainBodyHeight < 120) {
			var wrap = Math.round(((120 - msgMainBodyHeight) / 4));
			msgMainBody.style.marginTop = wrap + "px";
			if(msgMainFoot!=null){
				msgMainFoot.style.marginTop = (wrap * 3) + "px";
			}
		} else {
			msgMain.style.width = "500px";
			msgMain.style.height = (msgMainBody.offsetHeight + 88) + "px";
			if(msgMainFoot!=null){
				msgMainFoot.style.marginTop = "10px";
			}
		}
		var swrapHeight = document.body.scrollTop;
		if (swrapHeight == 0) {
			swrapHeight = document.documentElement.scrollTop;
		}
		if (swrapHeight == 0) {
			msgMain.style.top = "180px";
		} else {
			msgMain.style.top = (swrapHeight + 180) + "px";
		}
	}
}

MessageObj.prototype.centerWidth = function() {
	var msgMain = document.getElementById('message_main');
	if (msgMain != null) {
		var width = document.body.clientWidth;
		var position = Math.round((width - msgMain.offsetWidth)/2);
		msgMain.style.left = position + 'px';
	}
}

MessageObj.prototype.center = function(){
	this.full_show();
	this.centerHeight();
	this.centerWidth();
}

function show_message_fucus(){
	var button = document.getElementById('show_message_colse_button');
	if(button!=null){
		button.focus();
	}
}

window.onresize = function(){ 
	if(msgObj!=null){
		msgObj.centerWidth();
	}; 
}




IE6.0 或以上, firefox, opera等浏览器都测试通过。附件附带图片,CSS,及测试HTML
  相关解决方案