信息提示插件，在平常的开发中也是经常乃至的一个插件，像是一些辅助信息的提示，如：加载成功、提交信息成功或失败等等。这个插件在163邮箱中用在切换标签时提示加载状态。
下面我们先来分析一下这个小插件需要实现的一些接口：
1、显示时的停留时间，这个我们可以直接在实例化类时传递进去。
2、显示内容可更新，这样一来就可以在整个页面中仅创建一个实例，然后通过不断的更新内容来达到不同信息显示的效果。如：tips.update('msg');
3、显示，如果想实现内容可更新后再显示，就需要能够手动调用显示接口。如：tips.update('new msg').show();
4、隐藏，显示的时候我们可以直接立即隐藏。
5、删除，如果我们仅使用一次，或者是此操作之后页面中不再使用此插件，那么我们最好是从页面中移除而不仅仅是隐藏。
接下来我们看下源代码：
1 /** 2 * 信息提示插件 3 * @author Ly 4 * @date 2012/11/15 5 */ 6 ;Neter.namespace('Neter.Tips'); 7 8 /** 9 * @class 10 * @name Neter.Tips 11 * @param {Object} options 自定义配置信息，默认配置信息如下： 12 <pre> 13 options = { 14 container : document.body, // 信息提示框架放于哪个容器中进行显示，默认为body 15 msg : '', // 信息内容 16 showTime : 2000, // 提示信息显示时间，单位毫秒，默认为2000毫秒 17 type : 'success' // 提示框类型，success（绿色）、error（红色）、aside（灰色）、warning（棕色） 18 } 19 </pre> 20 */ 21 ;Neter.Tips = function(options) { 22 var _this = this; 23 24 this.defaults = { 25 container : document.body, // 信息提示框架放于哪个容器中进行显示，默认为body 26 msg : '', // 信息内容 27 showTime : 2000, // 提示信息显示时间，单位毫秒，默认为2000毫秒 28 type : 'success' // 提示框类型，success（绿色）、error（红色）、aside（灰色）、warning（棕色） 29 }; 30 31 Neter.apply(this.defaults, options); 32 33 this.handler = { 34 container : $(this.defaults.container), 35 tips : null 36 }; 37 38 this.method = { 39 /** 40 * 创建框架 41 * @ignore 42 */ 43 create : function() { 44 var defaults = _this.defaults, 45 handler = _this.handler; 46 47 handler.tips = $('<div></div>').addClass('neter-tips') 48 .html(defaults.msg) 49 .appendTo(defaults.container); 50 51 return this; 52 } 53 }; 54 }; 55 56 ;Neter.apply(Neter.Tips.prototype, { 57 /** 58 * 渲染插件，渲染后仅是将插件添加到页面中，若要显示需调用show方法 59 * @function 60 * @name Neter.Tips.prototype.render 61 * @return {Neter.Tips} 返回插件的引用 62 */ 63 render : function() { 64 this.method.create(); 65 66 return this; 67 }, 68 /** 69 * 获取插件的DOM对象 70 * @function 71 * @name Neter.Tips.prototype.get 72 * @return {jQueryDOM} 返回当前插件的DOM对象，经过jQuery封装过。 73 */ 74 get : function() { 75 return this.handler.tips; 76 }, 77 /** 78 * 更新插件的消息内容 79 * @function 80 * @name Neter.Tips.prototype.update 81 * @param {String} msg 消息内容 82 * @return {Neter.Tips} 返回插件的引用 83 */ 84 update : function(msg) { 85 this.defaults.msg = msg || this.defaults.msg; 86 87 return this; 88 }, 89 /** 90 * 显示插件 91 * @function 92 * @name Neter.Tips.prototype.show 93 * @param {String} [type] 指定信息框的类型，可以省略，省略则使用上次设置的类型 94 * @param {Boolean} [showType=false] 显示方式，默认为false，即以动画方式来显示，true为立即显示，并且不自动隐藏 95 * @return {Neter.Tips} 返回插件的引用 96 */ 97 show : function(type, showType) { 98 var defaults = this.defaults, 99 tips = this.handler.tips; 100 101 if (!tips) { return this; } 102 103 defaults.type = type || defaults.type; 104 105 tips.html(defaults.msg) 106 .removeClass('neter-tips-success neter-tips-error neter-tips-aside neter-tips-warning') 107 .addClass('neter-tips-' + defaults.type) 108 .css({ marginLeft : -tips.outerWidth() / 2 }); 109 110 if (showType) { 111 tips.css({ top : 0 }).show(); 112 } else { 113 tips.animate({ top : 0 }) 114 .delay(defaults.showTime) 115 .animate({ top : -tips.outerHeight() }, 'slow'); 116 } 117 118 return this; 119 }, 120 /** 121 * 隐藏插件 122 * @function 123 * @name Neter.Tips.prototype.hide 124 * @return {Neter.Tips} 返回插件的引用 125 */ 126 hide : function() { 127 this.handler.tips && this.handler.tips.animate({ top : -this.handler.tips.outerHeight() }, 'slow'); 128 129 return this; 130 }, 131 /** 132 * 删除插件，删除后不能再调用show进行显示 133 * @function 134 * @name Neter.Tips.prototype.remove 135 * @return {Object} 返回null 136 */ 137 remove : function() { 138 this.handler.tips.empty().remove(); 139 this.handler.tips = null; 140 141 return null; 142 } 143 });
这里面也没有什么值得说明的，代码比较简单，相信大家一看就明白。下面就列几种使用方法：
1 // 1. 直接创建并且显示 2 new Neter.Tips({ msg : '提交成功'}).render().show(); 3 4 // 2. 指定类型，支持：success（绿色）、error（红色）、aside（灰色）、warning（棕色） 5 new Neter.Tips({ msg : '提交数据失败', type : 'error' }).render().show(); 6 7 // 3. 使用图片作为显示内容 8 new Neter.Tips({ msg : $('<img>').attr('src', 'info.png') }).render();
也可以从这里单击下载示例文件。