jquery.notify.js

///////////////////////////////////////////////////////////////////////////////
// Plugin generador de tags                                                  //
///////////////////////////////////////////////////////////////////////////////
$(document).ready(function () {
    "use strict";
    var pluginName = "fwNotify";
    var note = $('<div class="alert"></div>');
    var defaults = {
        type: 'success',
        closable: true,
        transition: 'fade',
        fadeOut: {
            enabled: true,
            delay: 3000
        },
        message: {
            html: false,
            text: 'This is a message.'
        },
        onClose: function () {},
        onClosed: function () {}
    };
    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.note = note;
        this.init();
    }
    Plugin.prototype = {
        init: function () {
            var that = this;
            var self = $(that.element);
            self.bind("destroyed", $.proxy(that.teardown, that));
            self.addClass(that._name);

            // Setup from options
            if(this.options.transition)
                if(this.options.transition == 'fade')
                    this.note.addClass('in').addClass(this.options.transition)
                else this.note.addClass(this.options.transition)
            else this.note.addClass('fade').addClass('in')

            if(this.options.type)
                this.note.addClass('alert-' + this.options.type)
            else this.note.addClass('alert-success')

            if(typeof this.options.message === 'object')
                if(this.options.message.html)
                this.note.html(this.options.message.html)
                else if(this.options.message.text)
                    this.note.text(this.options.message.text)
            else
                this.note.html(this.options.message)

            if(this.options.closable)
                this.note.prepend($('<a class="close pull-right" data-dismiss="alert" href="#">&times;</a>'))

            return true;
        },
        show: function () {
            var self = this;
            if(this.options.fadeOut.enabled)
                this.note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', function () {
                self.options.onClose()
                $(this).remove()
                self.options.onClosed()
            });

            console.log(this.note)
            $(this.element).append(this.note);

            this.note.on('closed', function(){
                self.options.onClosed();
            });
        },
        hide: function () {
            var self = this;
            if(this.options.fadeOut.enabled) {
            this.note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', function () {
                self.options.onClose();
                $(this).remove();
                self.options.onClosed();
            });
            }
            else {
                self.options.onClose();
                this.note.remove();
                self.options.onClosed();
            }
        },
        destroy: function() {
            $(this.element).unbind("destroyed", this.teardown);
            this.teardown();
            return true;
        },
        teardown: function() {
            $.removeData($(this.element)[0], this._name);
            $(this.element).removeClass(this._name);
            this.unbind();
            this.element = null;
            return this.element;
        },
        bind: function() { },
        unbind: function() { }
    };
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, pluginName)) {
                $.data(this, pluginName, new Plugin(this, options));
            }
        });
    };
});