Progressbar Finish Method

Implementing a finish method for a jQuery UI progressbar widget.

HTML

<div id="progressbar"></div>
<button>Finish</button>

CSS

body {
    font-size: 0.8em;
    margin: 1em;
}

#progressbar {
    width: 30%;
}

JavaScript

(function( $ ) {
    
    // Custom progressbar widget.
    $.widget( "app.progressbar", $.ui.progressbar, {
        
        // Our new finish method - sets the value to the
        // "max" option.
        finish: function() {
            
            var value = this.value(),
                max = this.options.max;
            
            // Only update the value if we're not already finished.
            // This avoids duplicate "complete" events from triggering.
            if ( value !== max ) {
                this.value( max );    
            }
            
        }
        
    });
    
    $(function() {
        
        // Create the progressbar instance.
        $( "#progressbar" ).progressbar({
            max: 0,
            value: 50,
            complete: function( e, ui ) {
                // Update the button label to test our new finish() method.
                $( "button" ).button( "option", "label", "Done!" );    
            }
        })
        
        // Used to call the new progressbar method we've implemented.
        $( "button" ).button().on( "click", function( e ) {
            $( "#progressbar" ).progressbar( "finish" );
        })
        
    });
    
})( jQuery );