Pull to refresh

intro.js — пошаговое руководство для веб-страницы

Reading time 1 min
Views 51K


Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты data-intro и data-step с описанием и номером шага соответственно к нужным элементам страницы. Вот так:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>

Для начала презентации нужно вызвать функцию introJs().start(). Введение можно разбить на части, присвоив элементам каждой части разные классы и ограничив introJs определённым классом. Например, если все элементы первой части презентации имеют класс .introduction-first, а второй — .introduction-second, можно сначала вызвать только первую часть, а в другом месте например, после того, как пользователь совершите некоторые действия — вторую:

introJs(".introduction-first").start();
...
introJs(".introduction-second").start();

Элементы поочерёдно подсвечиваются с комментариями, заданными в атрибутах data-intro. Перемещаться между ними можно стрелками на клавиатуре или щелчком мыши. На сайте проекта работает живое демо.

Библиотека опубликована на Гитхабе под лицензией MIT всего несколько дней назад. В планах автора на ближайшее будущее — улучшить совместимость с разными браузерами, добавить возможность позиционировать всплывающую подсказку относительно текущего элемента. Для использования с Ruby on Rails уже есть соответствующий gem, также есть виджет для Yii.

Tags:
Hubs:
+129
Comments 24
Comments Comments 24

Articles