diff --git a/demos/progressbar/displayvalue.html b/demos/progressbar/displayvalue.html new file mode 100644 index 00000000000..1fd2d9cfc0a --- /dev/null +++ b/demos/progressbar/displayvalue.html @@ -0,0 +1,40 @@ + + + + + jQuery UI Progressbar - Display value + + + + + + + + + + +
+ +
+ +
+ + + +
+ +

Display custom value (string) in progressbar.

+ +
+ + + + + diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index cf8ee9fe370..1216b580e83 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -13,6 +13,7 @@

Examples

  • Default functionality
  • Animated
  • Resizable progressbar
    • +
  • Display value
    • diff --git a/themes/base/jquery.ui.progressbar.css b/themes/base/jquery.ui.progressbar.css index 50fe84a6f4a..550aace3640 100644 --- a/themes/base/jquery.ui.progressbar.css +++ b/themes/base/jquery.ui.progressbar.css @@ -8,4 +8,5 @@ * http://docs.jquery.com/UI/Progressbar#theming */ .ui-progressbar { height:2em; text-align: left; } -.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } \ No newline at end of file +.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; text-align: center; } +.ui-progressbar .ui-progressbar-displayvalue {position: relative; top: 3px; } diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js index e0b728f1a24..80e85c78d06 100644 --- a/ui/jquery.ui.progressbar.js +++ b/ui/jquery.ui.progressbar.js @@ -15,7 +15,8 @@ $.widget( "ui.progressbar", { options: { - value: 0 + value: 0, + displayValue: false }, min: 0, @@ -31,7 +32,13 @@ $.widget( "ui.progressbar", { "aria-valuenow": this._value() }); - this.valueDiv = $( "
    " ) + var displayValue = ''; + if(this.options.displayValue !== false) + displayValue = '' + + this.options.displayValue + + ''; + + this.valueDiv = $( "
    " + displayValue + "
    " ) .appendTo( this.element ); this._refreshValue();