Настройка текстов кнопок

В библиотеке Intro.js каждый шаг интерактивного руководства сопровождается кнопками управления: Next, Previous, Skip, Done. По умолчанию эти кнопки имеют английские надписи, но библиотека предоставляет гибкие средства для их кастомизации и локализации. Управление текстами осуществляется через опции при инициализации Intro.js или через методы объекта introJs.

Опции для изменения текстов кнопок

При создании тура используется метод introJs() с последующей настройкой через метод setOptions. Для изменения текстов кнопок применяются ключи:

introJs().setOptions({
    nextLabel: 'Вперёд',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Готово'
}).start();
  • nextLabel – текст кнопки перехода к следующему шагу.
  • prevLabel – текст кнопки возврата к предыдущему шагу.
  • skipLabel – текст кнопки пропуска всего тура.
  • doneLabel – текст кнопки завершения тура.

Эти параметры принимают строковое значение и позволяют задавать любой текст, включая символы Юникода и HTML-разметку.

Локализация интерфейса

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

var i18n = {
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Завершить'
};

introJs().setOptions(i18n).start();

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

Настройка кнопок для отдельных шагов

В некоторых случаях требуется, чтобы текст кнопки менялся на определённом шаге. Для этого используется объект step при описании шагов тура:

introJs().setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Первый шаг',
            nextLabel: 'Следующий'
        },
        {
            element: '#step2',
            intro: 'Второй шаг',
            prevLabel: 'Назад',
            doneLabel: 'Завершить'
        }
    ]
}).start();

Важные моменты:

  • nextLabel и prevLabel могут переопределять глобальные настройки только для конкретного шага.
  • doneLabel автоматически заменяет кнопку Next на последнем шаге, если задано.
  • Пропущенные параметры наследуют глобальные значения, что обеспечивает консистентность.

Использование HTML в кнопках

Intro.js поддерживает вставку HTML-разметки в тексты кнопок. Это позволяет добавлять иконки или стилизованные элементы:

introJs().setOptions({
    nextLabel: '<span class="btn-text">Далее</span> <i class="arrow-icon"></i>',
    skipLabel: '<strong>Пропустить</strong>'
}).start();

Рекомендации при использовании HTML:

  • Убедиться, что стили для элементов кнопки определены в CSS.
  • Избегать сложных интерактивных элементов внутри кнопок, чтобы не нарушить работу библиотеки.
  • Использовать семантически корректные теги (span, strong, i) для стилизации текста и иконок.

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

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

introJs().onbeforechange(function(targetElement) {
    var step = this._currentStep;
    if(step === 1) {
        this.setOption('nextLabel', 'Следующий шаг');
    }
}).start();

Особенности динамического изменения:

  • Метод setOption позволяет изменить текст кнопки для текущего шага без перезапуска тура.
  • Можно задавать разные тексты в зависимости от состояния приложения или выбранного пользователя языка.
  • Поддерживается как изменение кнопки Next, так и Skip или Done.

Практические советы

  1. Консистентность – все кнопки должны быть одинаково понятны и согласованы по стилю и размеру текста.
  2. Ясность – избегать длинных надписей, чтобы они не выходили за пределы окна подсказки.
  3. Локализация – использовать единый объект с переводами для всего приложения, особенно если предусмотрены несколько языков.
  4. HTML только для оформления – функциональные элементы в кнопках могут нарушить поведение тура, лучше ограничиваться визуальными элементами.

Настройка текстов кнопок в Intro.js обеспечивает гибкость интерфейса и улучшает пользовательский опыт, позволяя создавать полностью локализованные и стилизованные интерактивные руководства.

Оглавление