Widget Interaction Testing

by markallgood

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 } );
        }
    }
});

$.widget( "nmk.progressresponder", {
    _create: function() {
        this.element.addClass( "progressresponder" );
        $(".progressbar").on("progressbarcomplete", $.proxy(function(event, data) {
            this.element.text('Responder says: ' + data.value);
        }, this));
    }
});
          

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    });
//    .bind( "progressbarcomplete", function( event, data ) {
//        alert( "Events bubble and support many handlers for extreme flexibility." );
//        alert( "The progress bar value is " + data.value );
//    });

$( "<div></div>" ).appendTo( "body" ).progressresponder();

bar.progressbar( "option", "value", 100 );