Showing with 80 additions and 17 deletions.
  1. +57 −0 demos/progressbar/label.html
  2. +23 −17 ui/jquery.ui.progressbar.js
57 demos/progressbar/label.html
View file
@@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.3.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false,
change: function( event, ui ) {
$( ".progress-label" ).text( $( "#progressbar" ).progressbar( "value" ) + "%" );
}
});

function progress() {
var val = $( "#progressbar" ).progressbar( "value" );

if ( !val ) {
val = 0;
}
if ( val < 100 ) {
$( "#progressbar" ).progressbar( "value", val + 1 );
setTimeout( function() {
progress();
}, 100);
} else {
$( ".progress-label" ).text( "Complete!" );
}
}

setTimeout( progress, 3000 );
});
</script>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>

<div class="demo-description">
<p>Custom updated label demo.</p>
</div>
</body>
</html>
40 ui/jquery.ui.progressbar.js
View file
@@ -36,7 +36,7 @@ $.widget( "ui.progressbar", {
"aria-valuenow": this.options.value
});

this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" )
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
.appendTo( this.element );

this.oldValue = this.options.value;
@@ -114,11 +114,29 @@ $.widget( "ui.progressbar", {

_refreshValue: function() {
var value = this.options.value,
percentage = this._percentage(),
overlay = this.valueDiv.children().eq( 0 );
percentage = this._percentage();

overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate );
this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
this.valueDiv
.toggle( this.indeterminate || value > this.min )
.toggleClass( "ui-corner-right", value === this.options.max )
.toggleClass( "ui-progressbar-indeterminate", this.indeterminate )
.width( percentage.toFixed(0) + "%" );

if ( this.indeterminate ) {
this.element.removeAttr( "aria-valuemax" ).removeAttr( "aria-valuenow" );
if ( !this.overlayDiv ) {
this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
}
} else {
this.element.attr({
"aria-valuemax": this.options.max,
"aria-valuenow": value
});
if ( this.overlayDiv ) {
this.overlayDiv.remove();
this.overlayDiv = null;
}
}

if ( this.oldValue !== value ) {
this.oldValue = value;
@@ -127,18 +145,6 @@ $.widget( "ui.progressbar", {
if ( value === this.options.max ) {
this._trigger( "complete" );
}

this.valueDiv
.toggle( this.indeterminate || value > this.min )
.toggleClass( "ui-corner-right", value === this.options.max )
.width( percentage.toFixed(0) + "%" );
if ( this.indeterminate ) {
this.element.removeAttr( "aria-valuemax" );
this.element.removeAttr( "aria-valuenow" );
} else {
this.element.attr( "aria-valuemax", this.options.max );
this.element.attr( "aria-valuenow", value );
}
}
});