* enhanced messager.

src/js/messager.js

@@ -11,88 +11,132 @@
     'use strict';
 
     var id = 0;
-    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-content">{message}</div><button class="close-messager">&times;</button></div>';
-
-    function Messager()
-    {
-        this.show = function(message, type, placement, time, parent)
+    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-content"></div><div class="messager-actions"><button type="button" class="close action">&times;</button></div></div>';
+    var defaultOptions =
     {
-            $('.messager').hide();
+        type: 'default',
+        placement: 'top',
+        time: 4000,
+        parent: 'body',
+        // clear: false,
+        icon: null,
+        close: true,
+        fade: true,
+        scale: true
+    };
+    var lastMessager;
 
-            id++;
-            type = type || 'default';
-            time = time || 2000;
-            parent = parent || 'body';
-            placement = placement || 'top';
-            var msg = $(template.format(
+    var Messager = function(message, options)
     {
-                message: message,
-                type: type,
-                placement: placement,
-                id: id
-            })).appendTo(parent);
-            msg.find('.close-messager').click(function()
-            {
-                $(this).closest('.messager').fadeOut();
-            });
+        var that = this;
+        that.id = id++;
+        options = that.options = $.extend({}, defaultOptions, options);
+        that.message = (options.icon ? '<i class="icon-' + options.icon + ' icon"></i> ' : '') + message;
 
-            if (placement == 'top' || placement == 'bottom')
+        that.$ = $(template.format(options)).toggleClass('fade', options.fade).toggleClass('scale', options.scale).attr('id', 'messager-' + that.id);
+        if(!options.close)
         {
-                msg.css('left', ($(parent).width() - msg.width() - 50) / 2);
+            that.$.find('.close').remove();
         }
-
-            msg.fadeIn();
-
-            setTimeout(function()
+        else
         {
-                $('#messager' + id).fadeOut(function()
+            that.$.on('click', '.close', function()
             {
-                    $(this).remove();
+                that.hide();
             });
-            }, time);
+        }
+
+        that.$.find('.messager-content').html(that.message);
 
-            return msg;
+
+        that.$.data('zui.messager', that);
     };
 
-        this.primary = function(message, placement, time, parent)
+    Messager.prototype.show = function()
     {
-            return this.show(message, 'primary', placement, time, parent);
-        };
+        var that = this, options = this.options;
+
+        if(lastMessager && lastMessager.isShow) lastMessager.hide();
 
-        this.success = function(message, placement, time, parent)
+        that.$.appendTo(options.parent).show();
+
+        if (options.placement === 'top' || options.placement === 'bottom')
         {
-            return this.show('<i class="icon-ok-sign icon"></i> ' + message, 'success', placement, time, parent);
-        };
+            that.$.css('left', ($(options.parent).width() - that.$.width() - 50) / 2);
+        }
+
+        that.$.addClass('in');
 
-        this.info = function(message, placement, time, parent)
+        if(options.time)
         {
-            return this.show('<i class="icon-info-sign icon"></i> ' + message, 'info', placement, time, parent);
+            setTimeout(function(){that.hide();}, options.time);
+        }
+
+        that.isShow = true;
+        lastMessager = that;
     };
 
-        this.warning = function(message, placement, time, parent)
+    Messager.prototype.hide = function()
     {
-            return this.show('<i class="icon-warning-sign icon"></i>' + message, 'warning', placement, time, parent);
+        var that = this;
+        if(that.$.hasClass('in'))
+        {
+            that.$.removeClass('in');
+            setTimeout(function(){that.$.remove();}, 200);
+        }
+
+        that.isShow = false;
     };
 
-        this.danger = function(message, placement, time, parent)
+    $.Messager = Messager;
+    if(!window.Messager) window.Messager = Messager;
+
+    $.showMessage = function(message, options)
+    {
+        if(typeof options === 'string')
         {
-            return this.show('<i class="icon-exclamation-sign icon"></i>' + message, 'danger', placement, time, parent);
+            options = {type: options};
+        }
+        var msg = new Messager(message, options);
+        msg.show();
     };
 
-        this.important = function(message, placement, time, parent)
+    var getOptions = function(options)
     {
-            return this.show(message, 'important', placement, time, parent);
+        return (typeof options === 'string') ? {placement: options} : options;
     };
 
-        this.special = function(message, placement, time, parent)
+    $.messager =
     {
-            return this.show(message, 'special', placement, time, parent);
-        };
+        primary: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'primary'}, getOptions(options)));
+        },
+        success: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'success', icon: 'ok-sign'}, getOptions(options)));
+        },
+        info: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'info', icon: 'info-sign'}, getOptions(options)));
+        },
+        warning: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'warning', icon: 'warning-sign'}, getOptions(options)));
+        },
+        danger: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'danger', icon: 'exclamation-sign'}, getOptions(options)));
+        },
+        important: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'important'}, getOptions(options)));
+        },
+        special: function(message, options)
+        {
+            $.showMessage(message, $.extend({type: 'special'}, getOptions(options)));
         }
+    };
 
-    var messager = new Messager();
-
-    window.messager = messager;
-
-
+    if(!window.messager) window.messager = $.messager;
 }(jQuery, window));

src/less/modules/messager.less

@@ -55,21 +55,32 @@
   }
 }
 
-.close-messager
+.messager-actions
 {
   position: absolute;
-  right: 10px;
-  top: 5px;
-  background: none;
-  border: none;
+  right: 15px;
+  top: 10px;
+
+  > .action
+  {
     color: #fafafa;
     color: rgba(255, 255, 255, 0.6);
+    background: none;
+    border: none;
+    text-shadow: none;
+
+    &.close
+    {
+      opacity: 1;
       font-size: 20px;
+      font-weight: normal;
+    }
 
     &:hover
     {
       color: #fff;
     }
+  }
 }
 
 .messager-primary