Skip to content

Commit a74b69e

Browse files
committed
Progressbar: Add new download dialog demo
1 parent 7af03b7 commit a74b69e

File tree

2 files changed

+116
-0
lines changed

2 files changed

+116
-0
lines changed

demos/progressbar/download.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Progressbar - Download Dialog</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.9.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.progressbar.js"></script>
11+
<script src="../../ui/jquery.ui.mouse.js"></script>
12+
<script src="../../ui/jquery.ui.draggable.js"></script>
13+
<script src="../../ui/jquery.ui.button.js"></script>
14+
<script src="../../ui/jquery.ui.position.js"></script>
15+
<script src="../../ui/jquery.ui.dialog.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
18+
$(function() {
19+
var progressTimer,
20+
progressbar = $( "#progressbar" ),
21+
progressLabel = $( ".progress-label" ),
22+
dialogButtons = [{
23+
text: "Cancel Download",
24+
click: closeDownload
25+
}],
26+
dialog = $( "#dialog" ).dialog({
27+
autoOpen: false,
28+
closeOnEscape: false,
29+
resizable: false,
30+
buttons: dialogButtons,
31+
open: function() {
32+
progressTimer = setTimeout( progress, 2000 );
33+
},
34+
beforeClose: function() {
35+
downloadButton.button( "option", {
36+
disabled: false,
37+
label: "Start Download"
38+
});
39+
}
40+
}),
41+
downloadButton = $( "#downloadButton" )
42+
.button()
43+
.on( "click", function() {
44+
$( this ).button( "option", {
45+
disabled: true,
46+
label: "Downloading..."
47+
});
48+
dialog.dialog( "open" );
49+
});
50+
51+
progressbar.progressbar({
52+
value: false,
53+
change: function() {
54+
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
55+
},
56+
complete: function() {
57+
progressLabel.text( "Complete!" );
58+
dialog.dialog( "option", "buttons", [{
59+
text: "Close",
60+
click: closeDownload
61+
}]);
62+
$(".ui-dialog button").last().focus();
63+
}
64+
});
65+
66+
function progress() {
67+
var val = progressbar.progressbar( "value" ) || 0;
68+
69+
progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
70+
71+
if ( val <= 99 ) {
72+
progressTimer = setTimeout( progress, 100 );
73+
}
74+
}
75+
76+
function closeDownload() {
77+
clearTimeout( progressTimer );
78+
dialog
79+
.dialog( "option", "buttons", dialogButtons )
80+
.dialog( "close" );
81+
progressbar.progressbar( "value", false );
82+
progressLabel
83+
.text( "Starting download..." );
84+
downloadButton.focus();
85+
}
86+
});
87+
</script>
88+
<style>
89+
#progressbar {
90+
margin-top: 20px;
91+
}
92+
93+
.progress-label {
94+
font-weight: bold;
95+
text-shadow: 1px 1px 0 #fff;
96+
}
97+
98+
.ui-dialog-titlebar-close {
99+
display: none;
100+
}
101+
</style>
102+
</head>
103+
<body>
104+
105+
<div id="dialog" title="File Download">
106+
<div class="progress-label">Starting download...</div>
107+
<div id="progressbar"></div>
108+
</div>
109+
<button id="downloadButton">Start Download</button>
110+
111+
<div class="demo-description">
112+
<p>Download dialog progressbar demo.</p>
113+
</div>
114+
</body>
115+
</html>

demos/progressbar/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<li><a href="default.html">Default functionality</a></li>
1111
<li><a href="indeterminate.html">Indeterminate</a></li>
1212
<li><a href="label.html">Custom Labels</a></li>
13+
<li><a href="download.html">Download Dialog</a></li>
1314
</ul>
1415

1516
</body>

0 commit comments

Comments
 (0)