Extending jQueryUI Plugins (jQueryUI Progressbar Animation)

I don’t have time to write a full-on blog post about this, but I couldn’t find any documentation on this anywhere.

Basically, I didn’t want to re-write the jQueryUI ProgressBar plugin. I just wanted to change a little thing about the way it rendered. I basically wanted to override the functionality when it ran _renderValue. Instead of simply changing the width of the inner div, I wanted it to animate the difference. What I mean is that if you changed the value from 10 to 30, I wanted it to slide between 10 and 30 smoothly. Not a huge change. I didn’t want to overwrite the entire js file.
So, how does one override the jQueryUI plugin. Simple:
        $.ui.progressbar.prototype.{function} = function () {
        };
In this case, I simply copied everything that’s in the normal _refreshValue method from:
          var value = this.value();
          var percentage = this._percentage();
          if (this.oldValue !== value) {
            this.oldValue = value;
            this._trigger("change");
          }
          this.valueDiv
            .toggle(value > this.min)
            .toggleClass("ui-corner-right", value === this.options.max)
            .width(percentage.toFixed(0) + "%");
          this.element.attr("aria-valuenow", value);
To:
          var value = this.value();
          var percentage = this._percentage();
          if (this.oldValue !== value) {
            this.oldValue = value;
            this._trigger("change");
          }
          this.valueDiv
            .toggle(value > this.min)
            .toggleClass("ui-corner-right", value === this.options.max)
            .animate({
              width: percentage.toFixed(0) + "%"
            }, 1000);
          this.element.attr("aria-valuenow", value);
The complete code, ended up looking like this:
      (function ($) {
        $.ui.progressbar.prototype._refreshValue = function () {
          var value = this.value();
          var percentage = this._percentage();
          if (this.oldValue !== value) {
            this.oldValue = value;
            this._trigger("change");
          }
          this.valueDiv
            .toggle(value > this.min)
            .toggleClass("ui-corner-right", value === this.options.max)
            .animate({
              width: percentage.toFixed(0) + "%"
            }, 1000);
          this.element.attr("aria-valuenow", value);
        }
      })(jQuery);

So, what do you think ?