[1.7.2] Extending UI widgets - Inheritance Approach

[1.7.2] Extending UI widgets - Inheritance Approach

Hi

I know it is possible to extend jQuery UI widget to include new methods or overwrite methods. Here is an example of re-writing the "_refreshValue" method of the progressbar widget to display the value as text on the widget:

  1. (function($) {
  2.         $.extend($.ui.progressbar.prototype, {
  3.                 _refreshValue: function() {
  4.                         var value = this.value();
  5.                         this.valueDiv[value == this._valueMax() ? 'addClass' : 'removeClass']("ui-corner-right");
  6.                         this.valueDiv.width(value + '%');
  7.                         this.element.attr("aria-valuenow", value);

  8.                         this.valueDiv.text(value + '%'); // New/diff Code
  9.                 }
  10.         });
  11. })(jQuery);

From the code above, it is clear that if you want to retain all of the functionality of the original code but only want to add to it, one need to duplicate the original code. The ideal would have been if one could call the original method from within the new method. Something similar to the way one call the widget factory methods.

In essence, I'd like to code it like so:

  1. (function($) {
  2.         $.extend($.ui.progressbar.prototype, {
  3.                 _refreshValue: function() {
  4.                         $.ui.progressbar.prototype._refreshValue.call(this);
  5.                         this.valueDiv.text(value + '%');
  6.                 }
  7.         });
  8. });

Note the code above won't work because of recursion.

Has anyone ever attempted anything like this before?