Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -9,11 +9,20 @@ | ||
| * http://docs.jquery.com/UI/Progressbar#theming | ||
| */ | ||
| .ui-progressbar { | ||
| 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; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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>" ) | ||
| .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 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 this.indeterminate ? 100 : 100 * this.options.value / this.options.max; | ||
| }, | ||
|
|
||
| _refreshValue: function() { | ||
| 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 !== value ) { | ||
| this.oldValue = value; | ||
| this._trigger( "change" ); | ||
| } | ||
| 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 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.