|
8 | 8 | <script src="../../ui/jquery.ui.core.js"></script> |
9 | 9 | <script src="../../ui/jquery.ui.widget.js"></script> |
10 | 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> |
11 | 13 | <script src="../../ui/jquery.ui.button.js"></script> |
12 | 14 | <script src="../../ui/jquery.ui.position.js"></script> |
13 | 15 | <script src="../../ui/jquery.ui.dialog.js"></script> |
14 | 16 | <link rel="stylesheet" href="../demos.css"> |
15 | 17 | <script> |
16 | 18 | $(function() { |
17 | | - var progressbar = $( "#progressbar" ), |
| 19 | + var progressTimer, |
| 20 | + progressbar = $( "#progressbar" ), |
18 | 21 | progressLabel = $( ".progress-label" ), |
| 22 | + dialogButtons = [{ |
| 23 | + text: "Cancel Download", |
| 24 | + click: closeDownload |
| 25 | + }], |
19 | 26 | dialog = $( "#dialog" ).dialog({ |
20 | 27 | autoOpen: false, |
21 | 28 | closeOnEscape: false, |
22 | | - draggable: false, |
23 | 29 | resizable: false, |
| 30 | + buttons: dialogButtons, |
24 | 31 | open: function() { |
25 | | - setTimeout( progress, 2000 ); |
| 32 | + progressTimer = setTimeout( progress, 2000 ); |
26 | 33 | } |
27 | 34 | }), |
28 | 35 | downloadButton = $( "#downloadButton" ) |
|
38 | 45 | progressbar.progressbar({ |
39 | 46 | value: false, |
40 | 47 | change: function() { |
41 | | - progressLabel.text( progressbar.progressbar( "value" ) + "%" ); |
| 48 | + progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" ); |
42 | 49 | }, |
43 | 50 | complete: function() { |
44 | | - progressLabel |
45 | | - .prependTo( "#progressbar" ) |
46 | | - .css({ |
47 | | - "position": "absolute", |
48 | | - "left": "50%", |
49 | | - "float": "none", |
50 | | - "margin-left": "-30px", |
51 | | - "margin-right": 0 |
52 | | - }) |
53 | | - .text( "Complete!" ); |
54 | | - dialog.dialog( "option", "buttons", [ |
55 | | - { |
56 | | - text: "Close", |
57 | | - click: function() { |
58 | | - dialog |
59 | | - .dialog( "close" ) |
60 | | - .dialog( "option", "buttons", false ); |
61 | | - progressbar.progressbar( "value", false ); |
62 | | - progressLabel |
63 | | - .text( "Starting download..." ) |
64 | | - .css( "margin-left", "-55px" ); |
65 | | - downloadButton.button( "option", { |
66 | | - disabled: false, |
67 | | - label: "Start Download" |
68 | | - }); |
69 | | - } |
70 | | - } |
71 | | - ]); |
| 51 | + progressLabel.text( "Complete!" ); |
| 52 | + dialog.dialog( "option", "buttons", [{ |
| 53 | + text: "Close", |
| 54 | + click: closeDownload |
| 55 | + }]); |
72 | 56 | } |
73 | 57 | }); |
74 | 58 |
|
75 | 59 | function progress() { |
76 | 60 | var val = progressbar.progressbar( "value" ) || 0; |
77 | 61 |
|
78 | | - if ( !val ) { |
79 | | - progressLabel |
80 | | - .appendTo( ".ui-progressbar-value" ) |
81 | | - .css({ |
82 | | - "position": "relative", |
83 | | - "left": "auto", |
84 | | - "float": "right", |
85 | | - "margin-left": 0, |
86 | | - "margin-right": 5 |
87 | | - }); |
88 | | - } |
89 | | - |
90 | 62 | progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) ); |
91 | 63 |
|
92 | 64 | if ( val < 99 ) { |
93 | | - setTimeout( progress, 100 ); |
| 65 | + progressTimer = setTimeout( progress, 100 ); |
94 | 66 | } |
95 | 67 | } |
| 68 | + |
| 69 | + function closeDownload() { |
| 70 | + clearTimeout( progressTimer ); |
| 71 | + dialog |
| 72 | + .dialog( "option", "buttons", dialogButtons ) |
| 73 | + .dialog( "close" ); |
| 74 | + progressbar.progressbar( "value", false ); |
| 75 | + progressLabel |
| 76 | + .text( "Starting download..." ); |
| 77 | + downloadButton.button( "option", { |
| 78 | + disabled: false, |
| 79 | + label: "Start Download" |
| 80 | + }); |
| 81 | + } |
96 | 82 | }); |
97 | 83 | </script> |
98 | 84 | <style> |
99 | 85 | #progressbar { |
100 | | - margin-top: 30px; |
| 86 | + margin-top: 20px; |
101 | 87 | } |
102 | 88 |
|
103 | 89 | .progress-label { |
104 | | - position: absolute; |
105 | | - left: 50%; |
106 | | - margin-left: -55px; |
107 | | - margin-top: 5px; |
108 | 90 | font-weight: bold; |
109 | 91 | text-shadow: 1px 1px 0 #fff; |
110 | 92 | } |
|
117 | 99 | <body> |
118 | 100 |
|
119 | 101 | <div id="dialog" title="File Download"> |
120 | | - <div id="progressbar"><div class="progress-label">Starting download...</div></div> |
| 102 | + <div class="progress-label">Starting download...</div> |
| 103 | + <div id="progressbar"></div> |
121 | 104 | </div> |
122 | 105 | <button id="downloadButton">Start Download</button> |
123 | 106 |
|
|
0 commit comments