Progressbar: Add new download dialog demo

kborchers · Dec 30, 2012 · 4786fe8 · 4786fe8
1 parent 5561f5d
commit 4786fe8
Showing 1 changed file with 128 additions and 0 deletions.
diff --git a/demos/progressbar/download.html b/demos/progressbar/download.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Download Dialog</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>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var progressbar = $( "#progressbar" ),
+			progressLabel = $( ".progress-label" ),
+			dialog = $( "#dialog" ).dialog({
+				autoOpen: false,
+				closeOnEscape: false,
+				draggable: false,
+				resizable: false,
+				open: function() {
+					setTimeout( progress, 2000 );
+				}
+			}),
+			downloadButton = $( "#downloadButton" )
+				.button()
+				.on( "click", function() {
+					$( this ).button( "option", {
+						disabled: true,
+						label: "Downloading..."
+					});
+					dialog.dialog( "open" );
+				});
+
+		progressbar.progressbar({
+			value: false,
+			change: function() {
+				progressLabel.text( progressbar.progressbar( "value" ) + "%" );
+			},
+			complete: function() {
+				progressLabel
+					.prependTo( "#progressbar" )
+					.css({
+						"position": "absolute",
+						"left": "50%",
+						"float": "none",
+						"margin-left": "-30px",
+						"margin-right": 0
+					})
+					.text( "Complete!" );
+				dialog.dialog( "option", "buttons", [
+					{
+						text: "Close",
+						click: function() {
+							dialog
+								.dialog( "close" )
+								.dialog( "option", "buttons", false );
+							progressbar.progressbar( "value", false );
+							progressLabel
+								.text( "Starting download..." )
+								.css( "margin-left", "-55px" );
+							downloadButton.button( "option", {
+								disabled: false,
+								label: "Start Download"
+							});
+						}
+					}
+				]);
+			}
+		});
+
+		function progress() {
+			var val = progressbar.progressbar( "value" ) || 0;
+
+			if ( !val ) {
+				progressLabel
+					.appendTo( ".ui-progressbar-value" )
+					.css({
+						"position": "relative",
+						"left": "auto",
+						"float": "right",
+						"margin-left": 0,
+						"margin-right": 5
+					});
+			}
+
+			progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
+
+			if ( val < 99 ) {
+				setTimeout( progress, 100 );
+			}
+		}
+	});
+	</script>
+	<style>
+	#progressbar {
+		margin-top: 30px;
+	}
+
+	.progress-label {
+		position: absolute;
+		left: 50%;
+		margin-left: -55px;
+		margin-top: 5px;
+		font-weight: bold;
+		text-shadow: 1px 1px 0 #fff;
+	}
+
+	.ui-dialog-titlebar-close {
+		display: none;
+	}
+	</style>
+</head>
+<body>
+
+<div id="dialog" title="File Download">
+	<div id="progressbar"><div class="progress-label">Starting download...</div></div>
+</div>
+<button id="downloadButton">Start Download</button>
+
+<div class="demo-description">
+<p>Download dialog progressbar demo.</p>
+</div>
+</body>
+</html>