一款小巧的jquery消息提示插件

页面有时候会用到消息提示，目前互联网上有N种非常成熟的消息提醒插件，不过那些都是非常优秀的代码，对于初学者来说，可能一时难于看懂源代码。

本次消息提醒用的是非常简单的代码，采用大众熟悉的jquery库，对于刚刚接触javascript的同学来说，或许可以参考一二。

demo页面截图：

//处理成功



//正在加载



非常简单javascript代码，很容易就可以看懂

//延时加载，精确定位时间
var processor={
timeoutId:null,
process:function(callback,timeout){
clearTimeout(this.timeoutId);
this.timeoutId=setTimeout(function(){
if(typeof callback=="function"){
callback();
}
},timeout||2000);
}
};

var message={
self:null,
color:"green",	//字体颜色
iframe:false,	//是否跨iframe，若true，将在父页面显示
small:false,	//是否为小图标模式

//创建消息框
create:function(){
if(this.self==null){
var msg='<div class="message_box">';
msg+='<div class="message_content"><span class="message_icon"></span><span class="message_text"></span></div></div>';
this.self=$(msg).appendTo("body");
}
return this.self;
},
setOffset:function(){
this.create();
var documentWidth = $(document).width();
var documentHeight = $(document).height();
var width=this.self.outerWidth();
var height=this.self.outerHeight();
var left=(documentWidth-width)/2;
var top=(documentHeight-height)/2;
this.self.css({"top":top,"left":left});
return this.self;
},
setContent:function(text,icon){
var icon=icon||"ok";
if($(".message_content").hasClass("message_content_wait")){
$(".message_content_wait").removeClass("message_content_wait");
}
$(".message_icon").removeClass().addClass("message_icon icon_message_"+icon);
$(".message_text").text(text).css("color",this.color);
if(this.small==true){
this.self.removeClass().addClass("message_box_small");
}else{
this.self.removeClass().addClass("message_box");
}
return this.self;
},
show:function(text,icon,timeout){
this.setOffset();
this.setContent(text,icon).slideDown("fast");
processor.process(function(){
message.hide();
},timeout||2000);
},
hide:function(){
this.self.slideUp("fast");
},
ok:function(text,timeout){
this.color="green";
this.show(text,"ok",timeout);
},
error:function(text,timeout){
this.color="red";
this.show(text,"error",timeout);
},
warn:function(text,timeout){
this.color="#9E9E29";
this.show(text,"warn",timeout);
},
stop:function(text,timeout){
this.color="#8f0000";
this.show(text,"stop",timeout);
},
info:function(text,timeout){
this.color="#3250D3";
this.show(text,"info",timeout);
},
wait:function(text,timeout){
this.color="#D86F29";
this.show(text,"wait",timeout||30000);
$(".message_content").addClass("message_content_wait");
}
};

样式表

@CHARSET "UTF-8";

.message_box,.message_box_small{position:absolute; z-index:99999; background-color:#EDF3FF; border: 1px solid #91B5D6;border-radius:5px;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);}
.message_box{padding:20px 10px; width:180px; max-width:280px;}
.message_box_small{padding:15px 7px; width:160px; max-width:280px;}
.message_box .message_content{position:relative; font-weight:bolder;padding-left: 32px;padding-top:4px;*padding-top:6px; height: auto; min-height:24px;}
.message_box .message_content_wait{padding-left: 0px;padding-top:8px;*padding-top:10px;text-align: center;min-height:20px;}
.message_box .message_icon{position:absolute;top:0px;left:0px; width:24px; height:24px; background: url("icon_message.png") no-repeat}
.message_box_small .message_content{position:relative; color:green;padding-left: 20px;*padding-top:2px; height: auto; min-height:16px;}
.message_box_small .message_icon{position:absolute;top:0px;left:0px; width:16px; height:16px; background: url("icon_message.png") no-repeat 0px 0px;}

.message_box_small .icon_message_ok{background-position: 0 0;}
.message_box_small .icon_message_warn{background-position: 0 -38px;}
.message_box_small .icon_message_stop{background-position: 0 -80px;}
.message_box_small .icon_message_error{background-position: 0 -122px;}
.message_box_small .icon_message_info{background-position: 0 -164px;}
.message_box_small .icon_message_question{background-position: 0 -207px;}
.message_box_small .icon_message_wait{background: url("icon_wait_circle.gif") no-repeat 0 0px;}

.message_box .icon_message_ok{background-position: 0 -244px;}
.message_box .icon_message_warn{background-position: 0 -286px;}
.message_box .icon_message_stop{background-position: 0 -328px;}
.message_box .icon_message_error{background-position: 0 -370px;}
.message_box .icon_message_info{background-position: 0 -412px;}
.message_box .icon_message_question{background-position: 0 -455px;}
.message_box .icon_message_wait{top:-7px;left:40px; width:100px; height:9px; background: url("icon_wait_rectangle.gif") no-repeat 0 0px;}

知识分享，若源代码已经打包上传，若需要可以点击这里