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