Настройка языка интерфейса

Для использования библиотеки Intro.js необходимо подключить CSS и JS файлы. Обычно это делается через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

После подключения библиотека готова к использованию. Базовая инициализация выполняется через:

const intro = introJs();
intro.start();

Этот код запускает стандартный шаг за шагом тур без дополнительной настройки интерфейса.

Изменение языка интерфейса

Intro.js по умолчанию отображает кнопки интерфейса на английском языке. Для изменения языка используется метод setOptions, где ключ locale позволяет указать переводы для всех стандартных элементов управления.

Пример настройки на русский язык:

intro.setOptions({
  locale: {
    next: 'Далее',
    prev: 'Назад',
    skip: 'Пропустить',
    done: 'Готово'
  }
});
intro.start();

Ключевые моменты:

  • next — текст кнопки для перехода к следующему шагу.
  • prev — текст кнопки для возврата к предыдущему шагу.
  • skip — текст кнопки для пропуска всего тура.
  • done — текст кнопки завершения тура.

Многоязычная поддержка

Для многоязычных приложений можно создать объект с переводами для разных языков:

const locales = {
  ru: { next: 'Далее', prev: 'Назад', skip: 'Пропустить', done: 'Готово' },
  en: { next: 'Next', prev: 'Back', skip: 'Skip', done: 'Done' },
  es: { next: 'Siguiente', prev: 'Atrás', skip: 'Omitir', done: 'Finalizar' }
};

const userLang = navigator.language.startsWith('ru') ? 'ru' : 'en';

intro.setOptions({ locale: locales[userLang] });
intro.start();

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

Динамическое изменение текста кнопок

В некоторых случаях требуется менять язык интерфейса уже после запуска тура. Для этого можно использовать метод onbeforechange и модифицировать кнопки вручную:

intro.onbeforechange(function(targetElement) {
  const locale = { next: 'Далее', prev: 'Назад', skip: 'Пропустить', done: 'Готово' };
  document.querySelector('.introjs-nextbutton').innerText = locale.next;
  document.querySelector('.introjs-prevbutton').innerText = locale.prev;
  document.querySelector('.introjs-skipbutton').innerText = locale.skip;
  document.querySelector('.introjs-donebutton').innerText = locale.done;
});

Такой метод позволяет менять интерфейс даже при динамическом контенте или многоязычном приложении.

Перевод подсказок

Помимо кнопок, Intro.js использует текст подсказок, который задается через атрибуты data-intro и data-step в HTML:

<button data-step="1" data-intro="Нажмите здесь для открытия меню">Меню</button>
<button data-step="2" data-intro="Выберите нужный раздел">Разделы</button>

Для многоязычной поддержки можно использовать JavaScript для динамической подстановки текста:

const steps = [
  { element: '#menu', intro: userLang === 'ru' ? 'Нажмите здесь для открытия меню' : 'Click here to open menu' },
  { element: '#sections', intro: userLang === 'ru' ? 'Выберите нужный раздел' : 'Select the desired section' }
];

intro.setOptions({ steps });
intro.start();

Пользовательские кнопки и переводы

Intro.js позволяет полностью кастомизировать кнопки и их стиль через CSS. При настройке языка важно учитывать, что длина текста на разных языках может отличаться, поэтому рекомендуется проверять отображение интерфейса:

.introjs-button {
  min-width: 70px; /* увеличение ширины для длинных слов */
  font-size: 14px;
}

Автоматическое переключение языка интерфейса

Для комплексных приложений удобным вариантом является хранение текущего языка в глобальной переменной или через состояние приложения, и подставлять соответствующий locale при каждом вызове Intro.js:

function startTour(lang) {
  const locales = {
    ru: { next: 'Далее', prev: 'Назад', skip: 'Пропустить', done: 'Готово' },
    en: { next: 'Next', prev: 'Back', skip: 'Skip', done: 'Done' }
  };
  const intro = introJs();
  intro.setOptions({ locale: locales[lang] });
  intro.start();
}

startTour('ru');

Такой подход обеспечивает консистентность языка интерфейса при любых сценариях запуска тура.

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

Оглавление