Permalink
Browse files

Progressbar: Use new animated "overlays" and animation option for eas…

…ier indeterminate theming and full animation support for all browsers. Update animated demo to use new animation option and add an indeterminate demo.
  • Loading branch information...
1 parent 8cc8a32 commit 61ae060c4975cfc0c3db578c403fda810de81ba6 @kborchers committed Aug 24, 2012
@@ -9,13 +9,11 @@
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
- <style>
- .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
- </style>
<script>
$(function() {
$( "#progressbar" ).progressbar({
- value: 59
+ value: 59,
+ animation: true
});
});
</script>
@@ -27,10 +25,7 @@
<div class="demo-description">
<p>
This progressbar has an animated fill by setting the
-<code>background-image</code>
-on the
-<code>.ui-progressbar-value</code>
-element, using css.
+<code>animation option</code>.
</p>
</div>
</body>
@@ -0,0 +1,55 @@
+<!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.2.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 ),
+ animation: false
+ });
+ } else if ( target.is( "#colorButton" ) ) {
+ pbarValue.css({
+ background: "none",
+ "background-color": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
+ });
+ } else {
+ if ( target.is( "#falseButton" ) ) {
+ pbar.progressbar( "option", "animation", "light" );
+ } else {
+ pbar.progressbar( "option", "animation", "dark" );
+ }
+ pbar.progressbar( "option", "value", false );
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div id="progressbar"></div>
+<button id="numButton">Random Value - Determinate</button>
+<button id="falseButton">Indeterminate - Light</button>
+<button id="falseButtonDark">Indeterminate - Dark</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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -10,27 +10,12 @@
*/
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value { margin: -1px; height:100%; }
-@-webkit-keyframes bg-anim {
- from { background-position: 0 0 }
- to { background-position: 40px 0 }
-}
-@-moz-keyframes bg-anim {
- from { background-position: 0 0 }
- to { background-position: 40px 0 }
-}
-@-ms-keyframes bg-anim {
- from { background-position: 0 0 }
- to { background-position: 40px 0 }
-}
-@keyframes bg-anim {
- from { background-position: 0 0 }
- to { background-position: 40px 0 }
-}
-.ui-progressbar .ui-progressbar-indeterminate {
- background: url("images/ui-bg_diagonals-thick_20_666666_40x40.png");
- -webkit-animation: bg-anim 1s linear infinite;
- -moz-animation: bg-anim 1s linear infinite;
- -ms-animation: bg-anim 1s linear infinite;
- animation: bg-anim 1s linear infinite;
+.ui-progressbar-overlay {
+ height: 100%;
+ filter: alpha(opacity=40);
+ opacity: 0.4;
}
+
+.ui-progressbar .ui-progressbar-animated { background: url("images/pb-overlay.gif"); }
+.ui-progressbar .ui-progressbar-animated-dark { background: url("images/pb-overlay-dark.gif"); }
@@ -33,7 +33,7 @@ $.widget( "ui.progressbar", {
"aria-valuemax": this.options.max
});
- 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 class='ui-progressbar-overlay'></div></div>" )
.appendTo( this.element );
this.oldValue = this._value();
@@ -61,8 +61,8 @@ $.widget( "ui.progressbar", {
},
_setOption: function( key, value ) {
- if ( key === "value" ) {
- this.options.value = value;
+ if ( key === "value" || key === "animation" ) {
+ this.options[ key ] = value;
this._refreshValue();
if ( this._value() === this.options.max ) {
this._trigger( "complete" );
@@ -90,9 +90,22 @@ $.widget( "ui.progressbar", {
_refreshValue: function() {
var value = this.value(),
- percentage = this._percentage();
-
- this.valueDiv.toggleClass( "ui-progressbar-indeterminate", isNaN( value ) );
+ percentage = this._percentage(),
+ overlay = this.valueDiv.children().eq( 0 );
+
+ if ( isNaN( value ) || this.options.animation ) {
+ if ( this.options.animation === "dark" ) {
+ overlay
+ .addClass( "ui-progressbar-animated-dark" )
+ .removeClass( "ui-progressbar-animated" );
+ } else {
+ overlay
+ .addClass( "ui-progressbar-animated" )
+ .removeClass( "ui-progressbar-animated-dark" );
+ }
+ } else {
+ overlay.removeClass( "ui-progressbar-animated ui-progressbar-animated-dark" );
+ }
if ( this.oldValue !== value && ( !isNaN( this.oldValue ) || !isNaN( value ) ) ) {
this.oldValue = value;

0 comments on commit 61ae060

Please sign in to comment.