JqueryUI - Progressbar Display status of a determinate or indeterminate process.

SUBMITTED BY: jlolk3r

DATE: Feb. 5, 2016, 3:02 a.m.

FORMAT: HTML

SIZE: 2.9 kB

Raw Download

HITS: 704

Report
  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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9. <link rel="stylesheet" href="/resources/demos/style.css">
  10. <script>
  11. $(function() {
  12. var progressTimer,
  13. progressbar = $( "#progressbar" ),
  14. progressLabel = $( ".progress-label" ),
  15. dialogButtons = [{
  16. text: "Cancel Download",
  17. click: closeDownload
  18. }],
  19. dialog = $( "#dialog" ).dialog({
  20. autoOpen: false,
  21. closeOnEscape: false,
  22. resizable: false,
  23. buttons: dialogButtons,
  24. open: function() {
  25. progressTimer = setTimeout( progress, 2000 );
  26. },
  27. beforeClose: function() {
  28. downloadButton.button( "option", {
  29. disabled: false,
  30. label: "Start Download"
  31. });
  32. }
  33. }),
  34. downloadButton = $( "#downloadButton" )
  35. .button()
  36. .on( "click", function() {
  37. $( this ).button( "option", {
  38. disabled: true,
  39. label: "Downloading..."
  40. });
  41. dialog.dialog( "open" );
  42. });
  44. progressbar.progressbar({
  45. value: false,
  46. change: function() {
  47. progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
  48. },
  49. complete: function() {
  50. progressLabel.text( "Complete!" );
  51. dialog.dialog( "option", "buttons", [{
  52. text: "Close",
  53. click: closeDownload
  54. }]);
  55. $(".ui-dialog button").last().focus();
  56. }
  57. });
  59. function progress() {
  60. var val = progressbar.progressbar( "value" ) || 0;
  62. progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
  64. if ( val <= 99 ) {
  65. progressTimer = setTimeout( progress, 50 );
  66. }
  67. }
  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.focus();
  78. }
  79. });
  80. </script>
  81. <style>
  82. #progressbar {
  83. margin-top: 20px;
  84. }
  86. .progress-label {
  87. font-weight: bold;
  88. text-shadow: 1px 1px 0 #fff;
  89. }
  91. .ui-dialog-titlebar-close {
  92. display: none;
  93. }
  94. </style>
  95. </head>
  96. <body>
  98. <div id="dialog" title="File Download">
  99. <div class="progress-label">Starting download...</div>
  100. <div id="progressbar"></div>
  101. </div>
  102. <button id="downloadButton">Start Download</button>
  105. </body>
  106. </html>
comments powered by Disqus