message

a message widget

by robasc33

HTML

<div id="message"></div>

JavaScript

(function ($) {

    $.widget('tools.message', {
        txtStyle: 'margin: 10px auto; text-align: center; width: 232px; word-wrap: break-word;',
        img: 'position: fixed; margin-top: -200px; text-align: center;background-color: green;' +
            'box-shadow: 2px 2px 4px #888;}',
        options: {
            class: 'message',
            msg: 'Success!',
            slideIn: 1000,
            slideOut: 4000,
            dt: 1000
        },

        _create: function () {
            var message = '<div class="text">' + this.options.msg + '</div>';
            this.element.attr('style', this.img).append(message);
            var el = this.element;
            this.element.click(function () {
                this.messagebox(el);
            });
        },

        _init: function () {
            this.messagebox(this.element);
        },

        /** display successful messagebox **/
        messagebox: function (el) {
            var me = this;
            $('.text').attr('style', this.txtStyle);

            $(el).animate({
                top: '+=200'
            }, this.options.slideIn)
                .delay(this.options.dt)
                .animate({
                top: '-=200'
            }, this.options.slideOut, function () {
                me._remove(el);
                console.log("mb is done!");
            });
        },

        _remove: function (el) {
            console.log("removed");
            el.removeAttr('style');
            var child = el.children();
            child.remove();
            this.destroy();
        },

        destroy: function () {
            this.element.detach();
            console.log("destroyed");
            //            this._destroy();
        }
    });
}(jQuery));

// run widget
$('#message').message();