Progressbar: Add custom label demo.

kborchers · kborchers · commit 548a6ce7f927 · 2012-11-29T22:13:39.000-06:00
diff --git a/demos/progressbar/label.html b/demos/progressbar/label.html
@@ -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>
