如何用js写一个消息提示中心

在web端，传统的消息，告警，错误的提示方式为弹出框，也就是alert出来，实际这样的方式不是很友好。

今天带大家一起制作一个如下图所示的消息提示js组件，在使用时，直接在页面中new一个message的对象即可使用。

使用方式：1.将jwmessage.js的文件引用到页面。

2.var messageinstance = new JWmessage();

3.messageinstance.draw(messageType, messageContent);//这样即可创建一个消息提示框,messageType是提示的类型，决定提示框的颜色

本组件接受3中类型，分别为：消息（1）、警告（2）、错误（3），悬浮5秒自动消失，也可点击x手动立刻关闭。

不多说，代码如下：

function JWmessage(){
	this.render = 'messagebox';
	//关闭消息框事件
	this._onCloseMessageEvent = function(obj){
		$(obj).click(function(){
			var jobj = $(obj).parent().parent().parent().parent();
			jobj.slideUp(500,function(){
				jobj.remove();
			});
		});
	};
	this._onAutoCloseMessageEvent = function(obj){
		setTimeout(function(){
			var jobj = $(obj).parent().parent().parent().parent();
			jobj.slideUp(500,function(){
				jobj.remove();
			});
		},5000);
	};
}
JWmessage.prototype = {
		setRender : function(renderid){
			this.render = renderid;
		},
		draw : function(messagetype,messagetext){
			//创建消息提示框
			var messageframe = document.createElement("div");
			var jmessageframe = $(messageframe);
			jmessageframe.addClass('index_messageframe');
			if(messagetype == "message"){
				jmessageframe.addClass('index_messageframe_message');
			}
			else if(messagetype == "warning"){
				jmessageframe.addClass('index_messageframe_warning');
			}
			else if(messagetype == "error"){
				jmessageframe.addClass('index_messageframe_error');
			}else{
				jmessageframe.addClass('index_messageframe_message');
			}
			//创建消息框的table和tr
			var messagetb = document.createElement("table");
			var messagetr = document.createElement("tr");
			//创建消息标题框
			var messagetdtile = document.createElement("td");
			var jmessagetdtile = $(messagetdtile);
			jmessagetdtile.addClass('index_messagetitle');
			//判断不同的消息类型给消息加不同的td
			if(messagetype == "message"){
				jmessagetdtile.html('消息:');
			}
			else if(messagetype == "warning"){
				jmessagetdtile.html('警告:');
			}
			else if(messagetype == "error"){
				jmessagetdtile.html('错误:');
			}else{
				jmessagetdtile.html('消息:');
			}
			//创建消息内容框
			var messagecontent = document.createElement("td");
			var jmessagecontent = $(messagecontent);
			jmessagecontent.addClass('index_messagecontent');
			jmessagecontent.html(messagetext);
			//创建关闭按钮td
			var messageicon = document.createElement("td");
			var jmessageicon = $(messageicon);
			jmessageicon.addClass('index_messageicon');
			//创建关闭按钮
			var messageicona = document.createElement("a");
			var jmessageicona = $(messageicona);
			jmessageicona.attr('href','javascript:void(0)');
			jmessageicona.html("X");
			messageicon.appendChild(messageicona);
			messagetr.appendChild(messagetdtile);
			messagetr.appendChild(messagecontent);
			messagetr.appendChild(messageicon);
			messagetb.appendChild(messagetr);
			messageframe.appendChild(messagetb);
			var renderobj = document.getElementById(this.render);
			renderobj.appendChild(messageframe);
			this._onCloseMessageEvent(messageicona);
			this._onAutoCloseMessageEvent(messageicona);
		}
};