一款小巧的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;}

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