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();
        },
        
//       // Respond to any changes the user makes to the 
//        // option method
//        _setOption: function ( key, value ) {
//            
//        }
        
        destroy: function() {
            this.element.detach();
            console.log("destroyed");
//            this._destroy();
        }
    });
}(jQuery));

function myTimer()
{
 ...