Permalink
Browse files
Progressbar: Add ability to set value: false for an indeterminate pro…
…gressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar
- Loading branch information
Showing
with
95 additions
and 20 deletions.
| @@ -0,0 +1,53 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI Progressbar - Indeterminate Value</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"> | ||
| <script> | ||
| $(function() { | ||
| $( "#progressbar" ).progressbar({ | ||
| value: false | ||
| }); | ||
| $( "button" ).on( "click", function( event ) { | ||
| var target = $( event.target ), | ||
| pbar = $( "#progressbar" ), | ||
| pbarValue = pbar.find( ".ui-progressbar-value" ); | ||
| if ( target.is( "#numButton" ) ) { | ||
| pbar.progressbar( "option", { | ||
| value: Math.floor( Math.random() * 100 ) | ||
| }); | ||
| } else if ( target.is( "#colorButton" ) ) { | ||
| pbarValue.css({ | ||
| "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 ) | ||
| }); | ||
| } else if ( target.is( "#falseButton" ) ) { | ||
| pbar.progressbar( "option", "value", false ); | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| <style> | ||
| #progressbar .ui-progressbar-value { | ||
| background-color: #CCCCCC; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="progressbar"></div> | ||
| <button id="numButton">Random Value - Determinate</button> | ||
| <button id="falseButton">Indeterminate</button> | ||
| <button id="colorButton">Random Color</button> | ||
|
|
||
| <div class="demo-description"> | ||
| <p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p> | ||
| </div> | ||
| </body> | ||
| </html> |
Binary file not shown.
| @@ -9,11 +9,20 @@ | ||
| * http://docs.jquery.com/UI/Progressbar#theming | ||
| */ | ||
| .ui-progressbar { | ||
| height:2em; | ||
| height: 2em; | ||
| text-align: left; | ||
| overflow: hidden; | ||
| } | ||
| .ui-progressbar .ui-progressbar-value { | ||
| margin: -1px; | ||
| height:100%; | ||
| } | ||
| .ui-progressbar .ui-progressbar-value .ui-progressbar-overlay { | ||
| background: url("images/animated-overlay.gif"); | ||
This comment has been minimized.
This comment has been minimized.
scottgonzalez
Member
|
||
| height: 100%; | ||
| filter: alpha(opacity=25); | ||
| opacity: 0.25; | ||
| } | ||
| .ui-progressbar .ui-progressbar-indeterminate { | ||
| background-image: none; | ||
| } | ||
| @@ -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>" ) | ||
| this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" ) | ||
| .appendTo( this.element ); | ||
|
|
||
| this.oldValue = this.options.value; | ||
| @@ -71,16 +71,19 @@ $.widget( "ui.progressbar", { | ||
| val = newValue; | ||
| } | ||
|
|
||
| this.indeterminate = val === false; | ||
|
|
||
| // sanitize value | ||
| if ( typeof val !== "number" ) { | ||
| val = 0; | ||
| } | ||
| return Math.min( this.options.max, Math.max( this.min, val ) ); | ||
| return this.indeterminate ? false : Math.min( this.options.max, Math.max( this.min, val ) ); | ||
| }, | ||
|
|
||
| _setOptions: function( options ) { | ||
| var val = options.value; | ||
|
|
||
| // Ensure "value" option is set after other values (like max) | ||
| delete options.value; | ||
| this._super( options ); | ||
|
|
||
| @@ -106,26 +109,36 @@ $.widget( "ui.progressbar", { | ||
| }, | ||
|
|
||
| _percentage: function() { | ||
| return 100 * this.options.value / this.options.max; | ||
| return this.indeterminate ? 100 : 100 * this.options.value / this.options.max; | ||
| }, | ||
|
|
||
| _refreshValue: function() { | ||
| var percentage = this._percentage(); | ||
| var value = this.options.value, | ||
| percentage = this._percentage(), | ||
| overlay = this.valueDiv.children().eq( 0 ); | ||
This comment has been minimized.
scottgonzalez
Member
|
||
|
|
||
| overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate ); | ||
| this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate ); | ||
|
|
||
| if ( this.oldValue !== this.options.value ) { | ||
| this.oldValue = this.options.value; | ||
| if ( this.oldValue !== value ) { | ||
| this.oldValue = value; | ||
| this._trigger( "change" ); | ||
| } | ||
| if ( this.options.value === this.options.max ) { | ||
| if ( value === this.options.max ) { | ||
| this._trigger( "complete" ); | ||
| } | ||
|
|
||
| this.valueDiv | ||
| .toggle( this.options.value > this.min ) | ||
| .toggleClass( "ui-corner-right", this.options.value === this.options.max ) | ||
| .toggle( this.indeterminate || value > this.min ) | ||
| .toggleClass( "ui-corner-right", value === this.options.max ) | ||
| .width( percentage.toFixed(0) + "%" ); | ||
| this.element.attr( "aria-valuemax", this.options.max ); | ||
| this.element.attr( "aria-valuenow", this.options.value ); | ||
| if ( this.indeterminate ) { | ||
| this.element.removeAttr( "aria-valuemax" ); | ||
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
scottgonzalez
Member
|
||
| this.element.removeAttr( "aria-valuenow" ); | ||
| } else { | ||
| this.element.attr( "aria-valuemax", this.options.max ); | ||
This comment has been minimized. |
||
| this.element.attr( "aria-valuenow", value ); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
Why are there quotes here? Every other url in jQuery UI's css is unquoted. It's probably best to be consistant and remove them.