进度条| jQuery UI - JS UI

时间:2015-10-22 19:49:21

标签: javascript jquery angularjs jquery-ui jquery-ui-progressbar

目前:

  1. 点击"开始下载"按钮
  2. "文件下载"框显示
  3. 下载开始
  4. 进度指示器开始并运行至100%
  5. 框表示"完成"
  6. 我未能成功修改代码以执行以下操作:

    1. 点击"开始下载"按钮
    2. "文件下载"框显示
    3. 文件1下载开始
    4. 进度指示器状态"文件1下载"然后开始并运行到100%
    5. 文件2下载开始
    6. 进度指示器状态"文件2下载"然后开始并运行到100%
    7. 文件3下载开始
    8. 进度指示器状态"文件3下载"然后开始并运行到100%
    9. 框表示"完成"
    10. 我使用的代码位于以下网址:https://jqueryui.com/progressbar/#download

        $(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, 50 );
        }
      }
      
      function closeDownload() {
        clearTimeout( progressTimer );
        dialog
          .dialog( "option", "buttons", dialogButtons )
          .dialog( "close" );
        progressbar.progressbar( "value", false );
        progressLabel
          .text( "Starting download..." );
        downloadButton.focus();
      }
      

      });

0 个答案:

没有答案