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

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

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

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

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

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

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

Подключите intro.js и introjs.css (или минимизированную версию для продакшена) на вашей странице. Используйте introjs-rtl.min.css для поддержки языка, где текст справа слева.
Добавьте data-intro и data-step в ваши HTML элементы. Чтобы добавить подсказки, вы должны использовать атрибут data-hint. Например:
```
<a href='http://site.ru' data-intro='Online тур'></a>
```
Полный список атрибутов Intro.Js.
Вызовите эту JavaScript функцию:
```
introJs.start();
```

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

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

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, чтобы минимизировать все статичные ресурсы.