Создание пошаговых подсказок на jQuery и 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 может быть добавлен на ваш сайт в три простых шага:

Подключите intro.js и introjs.css (или минимизированную версию для продакшена) на вашей странице. Используйте introjs-rtl.min.css для поддержки языка, где текст справа слева.

Добавьте data-intro и data-step в ваши HTML элементы. Чтобы добавить подсказки, вы должны использовать атрибут data-hint . Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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 .

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