diff options
| author | Kris Borchers <kris.borchers@gmail.com> | 2012-12-29 23:17:38 -0600 |
|---|---|---|
| committer | Kris Borchers <kris.borchers@gmail.com> | 2013-04-30 10:08:56 -0500 |
| commit | a74b69e7c2a1e926f393f275d9abac3e58aee01b (patch) | |
| tree | d5a76a3b2fdafaa0828492b3c6accc0443d3d0be /demos | |
| parent | 7af03b73ea0786de9361f3cd21ef46047cb957d7 (diff) | |
| download | jquery-ui-a74b69e7c2a1e926f393f275d9abac3e58aee01b.tar.gz jquery-ui-a74b69e7c2a1e926f393f275d9abac3e58aee01b.zip | |
Progressbar: Add new download dialog demo
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/progressbar/download.html | 115 | ||||
| -rw-r--r-- | demos/progressbar/index.html | 1 |
2 files changed, 116 insertions, 0 deletions
diff --git a/demos/progressbar/download.html b/demos/progressbar/download.html new file mode 100644 index 000000000..8742de3bf --- /dev/null +++ b/demos/progressbar/download.html @@ -0,0 +1,115 @@ +<!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.9.1.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.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.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 progressTimer, + progressbar = $( "#progressbar" ), + progressLabel = $( ".progress-label" ), + dialogButtons = [{ + text: "Cancel Download", + click: closeDownload + }], + dialog = $( "#dialog" ).dialog({ + autoOpen: false, + closeOnEscape: false, + resizable: false, + buttons: dialogButtons, + open: function() { + progressTimer = setTimeout( progress, 2000 ); + }, + beforeClose: function() { + downloadButton.button( "option", { + disabled: false, + label: "Start Download" + }); + } + }), + downloadButton = $( "#downloadButton" ) + .button() + .on( "click", function() { + $( this ).button( "option", { + disabled: true, + label: "Downloading..." + }); + dialog.dialog( "open" ); + }); + + progressbar.progressbar({ + value: false, + change: function() { + progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" ); + }, + complete: function() { + progressLabel.text( "Complete!" ); + dialog.dialog( "option", "buttons", [{ + text: "Close", + click: closeDownload + }]); + $(".ui-dialog button").last().focus(); + } + }); + + function progress() { + var val = progressbar.progressbar( "value" ) || 0; + + progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) ); + + if ( val <= 99 ) { + progressTimer = setTimeout( progress, 100 ); + } + } + + function closeDownload() { + clearTimeout( progressTimer ); + dialog + .dialog( "option", "buttons", dialogButtons ) + .dialog( "close" ); + progressbar.progressbar( "value", false ); + progressLabel + .text( "Starting download..." ); + downloadButton.focus(); + } + }); + </script> + <style> + #progressbar { + margin-top: 20px; + } + + .progress-label { + 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 class="progress-label">Starting download...</div> + <div id="progressbar"></div> +</div> +<button id="downloadButton">Start Download</button> + +<div class="demo-description"> +<p>Download dialog progressbar demo.</p> +</div> +</body> +</html> diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index cfc054aea..85aacc84f 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -10,6 +10,7 @@ <li><a href="default.html">Default functionality</a></li> <li><a href="indeterminate.html">Indeterminate</a></li> <li><a href="label.html">Custom Labels</a></li> + <li><a href="download.html">Download Dialog</a></li> </ul> </body> |