仿網易郵箱5.0(四)：信息提示插件(tips.js)

信息提示插件，在日常的開發中也是常常乃至的一個插件，像是一些輔助信息的提示，如：加載成功、提交信息成功或失敗等等。這個插件在163郵箱中用在切換標籤時提示加載狀態。

下面咱們先來分析一下這個小插件須要實現的一些接口：

一、顯示時的停留時間，這個咱們能夠直接在實例化類時傳遞進去。

二、顯示內容可更新，這樣一來就能夠在整個頁面中僅建立一個實例，而後經過不斷的更新內容來達到不一樣信息顯示的效果。如：tips.update('msg');

三、顯示，若是想實現內容可更新後再顯示，就須要可以手動調用顯示接口。如：tips.update('new msg').show();

四、隱藏，顯示的時候咱們能夠直接當即隱藏。

五、刪除，若是咱們僅使用一次，或者是此操做以後頁面中再也不使用此插件，那麼咱們最好是從頁面中移除而不單單是隱藏。

接下來咱們看下源代碼：

  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 });

tips.js

這裏面也沒有什麼值得說明的，代碼比較簡單，相信你們一看就明白。下面就列幾種使用方法：

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();

也能夠從這裏單擊下載示例文件。