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