Escrevendo Plugins Stateful com o jQuery UI Widget Factory

Escrevendo Plugins Stateful com o jQuery UI Widget Factory

by Angelo Rogério Rubin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">

CSS

div {
    margin: 5px;
    padding: 5px;
    border: 1px solid #CCC;
}

JavaScript

$.widget( "nmk.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.element.addClass("progressbar");
        this._update();
    },
    _setOption: function( key, value ) {
        this.options[ key ] = value;
        this._update();
    },
    _update: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value === 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    destroy: function() {
        this.element
        .removeClass( "progressbar" )
        .text( "" );
        // Call the base destroy function.
        $.Widget.prototype.destroy.call( this );
    }
});

var bar = $( "<div />")
.appendTo( "body" )
.progressbar()
.data( "nmk-progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
// Access properties on the plugin instance.
alert( bar.options.value );