Переход между шагами

Библиотека SweetAlert предоставляет удобный механизм для создания модальных окон с различными типами уведомлений и взаимодействия с пользователем. Одной из ключевых возможностей является создание пошаговых интерфейсов, когда модальные окна последовательно отображаются с возможностью перехода между ними. Это часто используется для реализации форм, анкет или мастеров настройки, где необходимо, чтобы пользователь последовательно прошел через несколько шагов, заполнив необходимую информацию.

Основы использования переходов между шагами

Для реализации переходов между шагами в SweetAlert используется метод swal(), который позволяет отображать различные типы модальных окон, а также обрабатывать пользовательские действия через колбэки. В SweetAlert 2.x добавлена поддержка многошаговых диалогов через опцию showConfirmButton, а также дополнительные параметры для настройки кнопок перехода.

Swal.fire({
  title: 'Шаг 1',
  text: 'Введите имя',
  input: 'text',
  showCancelButton: true,
  confirmButtonText: 'Далее',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    // Переход к следующему шагу
    nextStep();
  }
});

В данном примере при нажатии на кнопку «Далее» происходит переход к следующему шагу. Механизм перехода между шагами строится на обработке событий, связанных с пользовательским взаимодействием, таких как нажатие кнопок или изменения введенных данных.

Плавные переходы между шагами

Одной из важных задач при реализации многошаговых интерфейсов является обеспечение плавности перехода между шагами, чтобы не создавать у пользователя ощущения резких скачков или перезагрузок страницы. SweetAlert позволяет использовать несколько модальных окон, которые отображаются последовательно, и можно добавить дополнительные параметры, чтобы улучшить визуальные переходы.

let currentStep = 1;

function showStep(step) {
  let config = {};

  switch (step) {
    case 1:
      config = {
        title: 'Шаг 1',
        text: 'Введите ваше имя',
        input: 'text',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
    case 2:
      config = {
        title: 'Шаг 2',
        text: 'Введите ваш возраст',
        input: 'number',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
    case 3:
      config = {
        title: 'Шаг 3',
        text: 'Выберите страну',
        input: 'select',
        inputOptions: ['Россия', 'Украина', 'Беларусь'],
        showCancelButton: true,
        confirmButtonText: 'Завершить'
      };
      break;
  }

  Swal.fire(config).then((result) => {
    if (result.isConfirmed) {
      currentStep++;
      if (currentStep <= 3) {
        showStep(currentStep);
      }
    }
  });
}

showStep(currentStep);

В этом примере создается функция showStep(), которая управляет последовательностью шагов и отображает соответствующее модальное окно. Переход к следующему шагу происходит по нажатию кнопки «Далее», а по завершении всех шагов — кнопка «Завершить».

Обработка данных на каждом шаге

Очень важно не только отображать шаги, но и собирать данные с каждого этапа. SweetAlert позволяет использовать различные типы входных данных, такие как текст, числа, пароли, а также выпадающие списки и другие элементы формы.

let userData = {};

function showStep(step) {
  let config = {};

  switch (step) {
    case 1:
      config = {
        title: 'Шаг 1',
        text: 'Введите ваше имя',
        input: 'text',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
    case 2:
      config = {
        title: 'Шаг 2',
        text: 'Введите ваш возраст',
        input: 'number',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
    case 3:
      config = {
        title: 'Шаг 3',
        text: 'Выберите страну',
        input: 'select',
        inputOptions: ['Россия', 'Украина', 'Беларусь'],
        showCancelButton: true,
        confirmButtonText: 'Завершить'
      };
      break;
  }

  Swal.fire(config).then((result) => {
    if (result.isConfirmed) {
      // Сохраняем введенные данные
      if (step === 1) userData.name = result.value;
      if (step === 2) userData.age = result.value;
      if (step === 3) userData.country = result.value;

      currentStep++;
      if (currentStep <= 3) {
        showStep(currentStep);
      } else {
        console.log('Данные пользователя:', userData);
      }
    }
  });
}

showStep(currentStep);

В данном примере на каждом шаге данные сохраняются в объекте userData. Это позволяет в конце процесса собрать все введенные пользователем данные.

Обработка отмены и ошибок

SweetAlert поддерживает обработку действий пользователя, таких как отмена или ошибка ввода. Это может быть полезно для обеспечения корректности ввода данных и предотвращения ненужных переходов.

function showStep(step) {
  let config = {};

  switch (step) {
    case 1:
      config = {
        title: 'Шаг 1',
        text: 'Введите ваше имя',
        input: 'text',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
    case 2:
      config = {
        title: 'Шаг 2',
        text: 'Введите ваш возраст',
        input: 'number',
        showCancelButton: true,
        confirmButtonText: 'Далее'
      };
      break;
  }

  Swal.fire(config).then((result) => {
    if (result.isConfirmed) {
      if (!result.value) {
        Swal.fire({
          title: 'Ошибка',
          text: 'Поле не может быть пустым!',
          icon: 'error'
        });
      } else {
        // Данные валидны, продолжаем
        if (step === 1) userData.name = result.value;
        if (step === 2) userData.age = result.value;

        currentStep++;
        if (currentStep <= 2) {
          showStep(currentStep);
        } else {
          console.log('Данные пользователя:', userData);
        }
      }
    } else {
      console.log('Процесс был отменен.');
    }
  });
}

Здесь добавлена проверка ввода, чтобы убедиться, что поле не пустое. В случае ошибки пользователю показывается сообщение об ошибке, и он остается на том же шаге.

Кастомизация интерфейса между шагами

SweetAlert позволяет настроить внешний вид и поведение кнопок на каждом шаге. Например, можно изменить текст кнопки, настроить её стили и цвета в зависимости от шага. Эти возможности полезны для создания адаптивных интерфейсов, где каждый шаг может требовать уникальной настройки.

function showStep(step) {
  let config = {};

  switch (step) {
    case 1:
      config = {
        title: 'Шаг 1',
        text: 'Введите ваше имя',
        input: 'text',
        showCancelButton: true,
        confirmButtonText: 'Далее',
        cancelButtonText: 'Отмена',
        buttonsStyling: false,
        customClass: {
          confirmButton: 'btn-confirm',
          cancelButton: 'btn-cancel'
        }
      };
      break;
    case 2:
      config = {
        title: 'Шаг 2',
        text: 'Введите ваш возраст',
        input: 'number',
        showCancelButton: true,
        confirmButtonText: 'Далее',
        cancelButtonText: 'Отмена',
        buttonsStyling: false,
        customClass: {
          confirmButton: 'btn-confirm',
          cancelButton: 'btn-cancel'
        }
      };
      break;
  }

  Swal.fire(config).then((result) => {
    if (result.isConfirmed) {
      if (step === 1) userData.name = result.value;
      if (step === 2) userData.age = result.value;

      currentStep++;
      if (currentStep <= 2) {
        showStep(currentStep);
      } else {
        console.log('Данные пользователя:', userData);
      }
    }
  });
}

В этом примере стили кнопок изменены с помощью параметра customClass. Это позволяет более гибко настраивать внешний вид интерфейса на каждом шаге.