Прогресс Бар | JQuery UI - JS UI

В настоящее время:

  1. Нажмите кнопку "Начать загрузку"
  2. Откроется окно "Загрузка файла"
  3. Загрузка начинается
  4. Индикатор прогресса начинается и работает до 100%
  5. В поле указано "Завершено"

Мне не удалось изменить код, чтобы сделать следующее:

  1. Нажмите кнопку "Начать загрузку"
  2. Откроется окно "Загрузка файла"
  3. Загрузка файла 1 начинается
  4. Индикатор прогресса показывает "загрузка файла 1", затем начинается и работает до 100%
  5. Загрузка файла 2 начинается
  6. Индикатор прогресса показывает "загрузка файла 2", затем начинается и работает до 100%
  7. Загрузка файла 3 начинается
  8. Индикатор прогресса показывает "загрузка файла 3", затем начинается и работает до 100%
  9. В поле указано "Завершено"

Код, который я использую, находится по следующему адресу: https://jqueryui.com/progressbar/

  $(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 ответов

Другие вопросы по тегам