Создание пошаговых подсказок на jQuery и Intro.Js

Опубликовано: 7 января 2016 г.
  • подсказки
  • jquery
Intro.Js позволяет создать презентацию, которая с помощью подсказок шаг за шагом отобразит существующие характеристики продукта, или научит пользоваться тем, или иным приложением на сайте.

Установка Intro.Js

Вы можете получить свою локальную копию Intro.js следующими способами:

  1. Из github репозитория, используя: git clone https://github.com/usablica/intro.js.git
  2. Используя bower: bower install intro.js --save
  3. Используя npm: npm install intro.js --save
  4. Скачать из CDN

Как создать презентацию с помощью Intro.Js

Intro.js может быть добавлен на ваш сайт в три простых шага:

  1. Подключите intro.js и introjs.css (или минимизированную версию для продакшена) на вашей странице. Используйте introjs-rtl.min.css для поддержки языка, где текст справа слева.
  2. Добавьте data-intro и data-step в ваши HTML элементы. Чтобы добавить подсказки, вы должны использовать атрибут data-hint. Например:

    <a href='http://site.ru' data-intro='Online тур'></a>

    Полный список атрибутов Intro.Js.

  3. Вызовите эту JavaScript функцию:

    introJs.start();

Присвоив элементам каждой части разные классы и ограничив introJs определенным классом, можно разбить введение на части, например: introJs(".introduction-farm").start(); запускает введение только для элементов с классом introduction-farm.

Intro.Js - jQuery подсказки

Использование шаблонов

IntroJS предоставляет потрясающие шаблоны и разработчики обещают на этом не останавливаться. Для того, чтобы использовать шаблоны, все, что вам нужно сделать, - это добавление шаблона стилей на вашу страницу после файла с CSS стилями для IntroJS:

<!-- Добавить сили для IntroJs -->
<link href="/introjs.css" rel="stylesheet">

<!-- Добавить шаблон Nazanin -->
<link href="/themes/introjs-nazanin.css" rel="stylesheet">

API

  • introJs([targetElm])

    Создание объекта introJs. Должен быть определен, чтобы начать презентацию для конкретного элемента. Например: #intro-farm. Добавлено в v0.1.0

    Параметры:
    targetElm : Строка (необязательно)

    Пример:

    introJs() // без селектора, начать презентацию
              // для всей страницы
    introJs("#intro-farm") // начать презентацию для элемента
                           // с id='intro-farm'
  • introJs.start()

    Начать введения для определенного элемента(ов). Добавлено в v0.1.0

    Пример:

    introJs().start()
  • introJs.goToStep(step)

    Перейти к конкретному шагу презентации. Добавлено в v0.3.0

    Параметры:
    tstep : Число

    Пример:

    // начинать презентацию с шага 2
    introJs().goToStep().start();
  • introJs.nextStep()

    Перейти к следующему шагу презентации. Добавлено в v0.7.0

    Возвращает:
    объект introJs

    Пример:

    introJs().start().nextStep();
  • introJs.previousStep()

    Перейти к предыдущему шагу презентации. Добавлено в v0.7.0

    Пример:

    // начинать презентацию с шага 2:
    introJs().goToStep(3).start().previousStep();
  • introJs.exit()

    Закончить презентацию. Добавлено в v0.3.0

    Пример:

    introJs().exit()
  • introJs.setOption(option, value)

    Устанавливает один параметр в introJs объект. Добавлено в v0.3.0

    Параметры:
    option : строка - название параметра
    value : строка/число - значение параметра

    Пример:

    introJs().setOption("skipLabel", "Exit");
  • introJs.setOptions(options)

    Устанавливает группу опций в introJs объект. Добавлено в v0.3.0

    Параметры:
    options : объект с параметрами и их значениями

    Пример:

    introJs().setOptions({ 
       'skipLabel': 'Exit', 
       'tooltipPosition': 'right' 
    });
  • introJs.refresh()

    Чтобы обновить и упорядочить слои вручную. Добавлено в v0.5.0

    Пример:

    introJs().refresh();
  • introJs.addHints()

    Для добавления доступных подсказок на страницу (с помощью data-hint, или JSON). Добавлено в v2.0

    Пример:

    introJs().addHints();
  • introJs.onhintclick(providedCallback)

    Вызывает заданную функцию, когда пользователь нажимает на одну из подсказок. Добавлено в v2.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onhintclick(function() {
      alert("Нажато!");
    });
  • introJs.onhintsadded(providedCallback)

    Вызывает заданную функцию обратного вызова после добавления и показа всех подсказок. Добавлено в v2.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onhintsadded(function() {
      alert("все подсказки добавлены");
    });
  • introJs.onhintclose(providedCallback)

    Вызывает функцию обратного вызова, когда подсказка удаляется со страницы (например, когда пользователь нажимает на кнопку "Got it"). Добавлено в v2.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onhintclose(function() {
      alert("подсказка закрыта");
    });
  • introJs.oncomplete(providedCallback)

    Вызывает функцию обратного вызова, когда презентация завершена. Добавлено в v0.2.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().oncomplete(function() {
      alert("конец презентации");
    });
  • introJs.onexit(providedCallback)

    Вызывает функцию обратного вызова при выходе из презентации. Выход также наступает при нажатии на кнопку ESC key and clicking on the overlay layer by the user. Добавлено в v0.2.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onexit(function() {
      alert("exit of introduction");
    });
  • introJs.onchange(providedCallback)

    Вызывает функцию обратного вызова при каждом новом шаге презентации, она будет вызвана после завершения каждого этапа. В качестве аргумента функция обратного вызова получает элемент нового этапа. Добавлено в v0.3.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onchange(function(targetElement) {
      alert("new step");
    });
  • introJs.onbeforechange(providedCallback)

    Заданная функция обратного вызова будет вызвана перед новым шагом презентации. Функция обратного вызова получает элемент нового шага в качестве аргумента. Добавлено в v0.4.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onbeforechange(function(targetElement) {
      alert("Вызов перед новым шагом");
    });
  • introJs.onafterchange(providedCallback)

    Заданная функция обратного вызова будет вызвана после запуска нового шага презентации. Функция обратного вызова получает элемент нового шага в качестве аргумента. Добавлено в v0.7.0

    Параметры:
    providedCallback : функция

    Пример:

    introJs().onafterchange(function(targetElement) {
      alert("Вызывается после нового шага");
    });

Атрибуты:

  • data-intro: Текст позсказки данного шага
  • data-step: Опционально определяет номер (приоритет) шага
  • data-tooltipClass: Опционально определяет CSS класс для подсказки
  • data-highlightClass: Опционально добавляет CSS класс к helperLayer
  • data-position: Опционально опредеяет положение подсказки: top, left, right, bottom, bottom-left-aligned (тоже что и bottom), bottom-middle-aligned и bottom-right-aligned. По умолчанию bottom
  • data-hint: The tooltip text of hint
  • data-hintPosition: Опционально определить положение of hint. Опции: top-middle, top-left, top-right, bottom-left, bottom-right, bottom-middle. По умолчанию: top-middle

Настройки:

  • steps: Для определения шагов, используя конфигурацию JSON (см. этот пример)
  • nextLabel: Надпись на кнопке следующего шага
  • prevLabel: Надпись на кнопке предыдущего шага
  • skipLabel: Надпись на кнопке пропуска презентации
  • doneLabel: Done button label
  • tooltipPosition: Позиция подсказки по умолчанию
  • tooltipClass: Добавление CSS класса для всех подсказок
  • highlightClass: Добавление CSS класса для всех helperLayer
  • exitOnEsc: Закончить презентацию при нажатии кнопки Escape, или нет (true, или false)
  • exitOnOverlayClick: Закончить презентацию при нажатии на слой с оверлеем, или нет (true, или false)
  • showStepNumbers: Показывать номер шага в красном кружочке, или нет (true, или false)
  • keyboardNavigation: Осуществлять навигацию с помощью клавиатуры, или нет (true or false)
  • showButtons: Показывать навигационные кнопки при презентации, или нет (true, или false)
  • showBullets: Показывать маркеры, или нет (true, или false)
  • showProgress: Показать индикатор прогресса, или нет. true, или false)
  • scrollToElement: Авто прокрутка выделенного элемента, если он за пределами экрана (true, или false)
  • overlayOpacity: Прозрачность оверлея, число
  • disableInteraction: Отключить взаимодействие внутри элемента, или нет (true, или false)
  • hintPosition: Hint position. По умолчанию: top-middle
  • hintButtonLabel: Hint button label. По умолчанию: 'Got it'

Смотрите пример в setOption.

Использование с:

Если вы используете Rails, вы можете воспользоваться introjs-rails гемом.

Для Yii фреймворка Вы можете просто использовать этот проект.

Здесь вы можете найти интеграцию IntroJs с Drupal.

Для AngularJS вы можете использовать директивы в angular-intro.js.

Вот плагин для Wordpress.

GWT обертки поверх Intro.js смотрте на Github.

Build

Во-первых, вы должны установить nodejs и npm, затем запустить команду npm install, чтобы установить все зависимости. После этого вы можете запустить команду make build, чтобы минимизировать все статичные ресурсы.

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
SPAbootstrapjavascriptjqueryанимацияверсткагалереяграфикакарусельподсказкискроллингсчетчикформыэлементы интерфейса
© 2009-2017 WebSketches.ru