* improve messsager.

src/js/messager.js

@@ -10,7 +10,7 @@
     'use strict';
 
     var id = 0;
-    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display: none"><div class="messager-content"></div><div class="messager-actions"></div></div>';
+    var template = '<div class="messager messager-{type} {placement}" style="display: none"><div class="messager-content"></div><div class="messager-actions"></div></div>';
     var defaultOptions = {
         type: 'default',
         placement: 'top',
@@ -35,7 +35,10 @@
         }
 
         var that = this;
-        that.id = id++;
+        that.id = options.id || (id++);
+        var oldMessager = all[that.id];
+        if(oldMessager) oldMessager.destory();
+        all[that.id] = that;
         options = that.options = $.extend({}, defaultOptions, options);
         that.message = (options.icon ? '<i class="icon-' + options.icon + ' icon"></i> ' : '') + message;
 
@@ -111,8 +114,8 @@
         that.$.removeClass('messager-' + options.type);
         if(newOptions) {
             options = $.extend(options, newOptions);
-            that.$.addClass('messager-' + options.type);
         }
+        that.$.addClass('messager-' + options.type);
         if(message) {
             that.message = (options.icon ? '<i class="icon-' + options.icon + ' icon"></i> ' : '') + message;
             that.$.find('.messager-content').html(that.message);
@@ -170,16 +173,22 @@
         return that;
     };
 
-    Messager.prototype.hide = function(callback) {
+    Messager.prototype.hide = function(callback, immediately) {
+        if(callback === true) {
+            immediately = true;
+            callback = null;
+        }
         var that = this;
         if(that.$.hasClass('in')) {
             that.$.removeClass('in');
-            setTimeout(function() {
+            var removeMessager = function() {
                 var $parent = that.$.parent();
                 that.$.detach();
                 if(!$parent.children().length) $parent.remove();
                 callback && callback(true);
-            }, 200);
+            };
+            if(immediately) removeMessager();
+            else setTimeout(removeMessager, 200);
         } else {
             callback && callback(false);
         }
@@ -188,8 +197,20 @@
     };
 
     Messager.prototype.destory = function() {
+        var that = this;
+        that.hide(true);
         that.$.remove();
         that.$ = null;
+        delete all[that.id];
+    };
+
+    Messager.all = all;
+
+    var hideMessage = function() {
+        $('.messager').each(function() {
+            var msg = $(this).data('zui.messager');
+            if(msg && msg.hide) msg.hide(true);
+        });
     };
 
     var showMessage = function(message, options) {
@@ -198,70 +219,45 @@
                 type: options
             };
         }
-        var msg = new Messager(message, options);
+        options = $.extend({}, options);
+        if(options.id === undefined) hideMessage();
+        var msg = all[options.id] || new Messager(message, options);
         msg.show();
         return msg;
     };
 
-    var hideMessage = function() {
-        $('.messager').each(function() {
-            var msg = $(this).data('zui.messager');
-            if(msg && msg.hide) msg.hide();
-        });
-    };
-
     var getOptions = function(options) {
         return(typeof options === 'string') ? {
             placement: options
         } : options;
     };
 
+    var zuiMessager = {
+        show: showMessage,
+        hide: hideMessage
+    };
+
+    $.each({
+        primary  : 0,
+        success  : 'ok-sign',
+        info     : 'info-sign',
+        warning  : 'warning-sign',
+        danger   : 'exclamation-sign',
+        important: 0,
+        special  : 0
+    }, function(name, icon){
+        zuiMessager[name] = function(message, options) {
+            return showMessage(message, $.extend({
+                type: name,
+                icon: icon || null
+            }, getOptions(options)));
+        };
+    });
+
     $.zui({
         Messager: Messager,
         showMessager: showMessage,
-        messager: {
-            show: showMessage,
-            hide: hideMessage,
-            primary: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'primary'
-                }, getOptions(options)));
-            },
-            success: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'success',
-                    icon: 'ok-sign'
-                }, getOptions(options)));
-            },
-            info: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'info',
-                    icon: 'info-sign'
-                }, getOptions(options)));
-            },
-            warning: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'warning',
-                    icon: 'warning-sign'
-                }, getOptions(options)));
-            },
-            danger: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'danger',
-                    icon: 'exclamation-sign'
-                }, getOptions(options)));
-            },
-            important: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'important'
-                }, getOptions(options)));
-            },
-            special: function(message, options) {
-                return showMessage(message, $.extend({
-                    type: 'special'
-                }, getOptions(options)));
-            }
-        }
+        messager: zuiMessager
     });
 }(jQuery, window, undefined));