library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar

Browse Source
This commit is contained in:
kborchers 2012-03-26 21:51:16 -05:00 committed by Kris Borchers
parent 509259a66e
commit d3bc471688
7 changed files with 96 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demos/progressbar/animated.html
View File

@ -9,14 +9,11 @@
<script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style>
.ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
</style>
<script> <script>
$(function() { $(function() {
$( "#progressbar" ).progressbar({ $( "#progressbar" ).progressbar({
value: 59 value: 59
}); }).find( ".ui-progressbar-value div" ).addClass( "ui-progressbar-overlay" );
}); });
</script> </script>
</head> </head>
@ -27,10 +24,10 @@
<div class="demo-description"> <div class="demo-description">
<p> <p>
This progressbar has an animated fill by setting the This progressbar has an animated fill by setting the
<code>background-image</code> <code>ui-progressbar-overlay</code> class
on the on the
<code>.ui-progressbar-value</code> <code>.ui-progressbar-value</code>
element, using css. element's overlay div.
</p> </p>
</div> </div>
</body> </body>

53
demos/progressbar/indeterminate.html Normal file
View File

@ -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>

1
demos/progressbar/index.html
View File

@ -10,6 +10,7 @@
<li><a href="default.html">Default functionality</a></li> <li><a href="default.html">Default functionality</a></li>
<li><a href="animated.html">Animated</a></li> <li><a href="animated.html">Animated</a></li>
<li><a href="resize.html">Resizable progressbar</a></li> <li><a href="resize.html">Resizable progressbar</a></li>
<li><a href="indeterminate.html">Indeterminate</a></li>
</ul> </ul>
</body> </body>

6
tests/unit/progressbar/progressbar_events.js
View File

@ -23,7 +23,7 @@ test( "change", function() {
}); });
test( "complete", function() { test( "complete", function() {
expect( 3 ); expect( 4 );
var value, var value,
changes = 0, changes = 0,
element = $( "#progressbar" ).progressbar({ element = $( "#progressbar" ).progressbar({
@ -32,12 +32,14 @@ test( "complete", function() {
deepEqual( element.progressbar( "value" ), value, "change at " + value ); deepEqual( element.progressbar( "value" ), value, "change at " + value );
}, },
complete: function() { complete: function() {
equal( changes, 2, "complete triggered after change" ); equal( changes, 3, "complete triggered after change and not on indeterminate" );
} }
}); });
value = 5; value = 5;
element.progressbar( "value", value ); element.progressbar( "value", value );
value = false;
element.progressbar( "value", value );
value = 100; value = 100;
element.progressbar( "value", value ); element.progressbar( "value", value );
}); });

BIN
themes/base/images/animated-overlay.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
themes/base/jquery.ui.progressbar.css vendored
View File

@ -17,3 +17,12 @@
margin: -1px; margin: -1px;
height:100%; height:100%;
} }
.ui-progressbar .ui-progressbar-value .ui-progressbar-overlay {
background: url("images/animated-overlay.gif");
height: 100%;
filter: alpha(opacity=25);
opacity: 0.25;
}
.ui-progressbar .ui-progressbar-indeterminate {
background-image: none;
}

33
ui/jquery.ui.progressbar.js vendored
View File

@ -36,7 +36,7 @@ $.widget( "ui.progressbar", {
"aria-valuenow": this.options.value "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 ); .appendTo( this.element );
this.oldValue = this.options.value; this.oldValue = this.options.value;
@ -71,16 +71,19 @@ $.widget( "ui.progressbar", {
val = newValue; val = newValue;
} }
this.indeterminate = val === false;
// sanitize value // sanitize value
if ( typeof val !== "number" ) { if ( typeof val !== "number" ) {
val = 0; 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 ) { _setOptions: function( options ) {
var val = options.value; var val = options.value;
// Ensure "value" option is set after other values (like max)
delete options.value; delete options.value;
this._super( options ); this._super( options );
@ -106,26 +109,36 @@ $.widget( "ui.progressbar", {
}, },
_percentage: function() { _percentage: function() {
return 100 * this.options.value / this.options.max; return this.indeterminate ? 100 : 100 * this.options.value / this.options.max;
}, },
_refreshValue: function() { _refreshValue: function() {
var percentage = this._percentage(); var value = this.options.value,
percentage = this._percentage(),
overlay = this.valueDiv.children().eq( 0 );
if ( this.oldValue !== this.options.value ) { overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate );
this.oldValue = this.options.value; this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
if ( this.oldValue !== value ) {
this.oldValue = value;
this._trigger( "change" ); this._trigger( "change" );
} }
if ( this.options.value === this.options.max ) { if ( value === this.options.max ) {
this._trigger( "complete" ); this._trigger( "complete" );
} }
this.valueDiv this.valueDiv
.toggle( this.options.value > this.min ) .toggle( this.indeterminate || value > this.min )
.toggleClass( "ui-corner-right", this.options.value === this.options.max ) .toggleClass( "ui-corner-right", value === this.options.max )
.width( percentage.toFixed(0) + "%" ); .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-valuemax", this.options.max );
this.element.attr( "aria-valuenow", this.options.value ); this.element.attr( "aria-valuenow", value );
}
} }
}); });