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



    Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты 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.

    • +129
    • 47,5k
    • 24
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 24
      +6
      Круто, будем юзать!
        +7
        Просто супер! Теперь не нужно будет снимать скринкасты для клиентов )
          +17
          Есть еще альтернативы: stackoverflow.com/a/10708053/320376
            0
            Из них давно выбрал guiders.js, но предложенное TC выглядит вполне достойно. Да еще и в гем завёрнуто!)
            +3
            библиотека супер, очень простая, не хватает одной возможности — размещать кружок с цифрой в одном из четырех углов на выбор, а не только в северо-западном =(
              +3
              А можно размещать разные шаги на разных страницах?
                +2
                Напомню, в составе Zurb Foundation такая вещь — Joyride есть уже давно и имхо выглядит симпотичнее.
                Это насчет альтернатив.
                foundation.zurb.com
                +3
                Единственное, что не понравилось — за хэлпом нужно следовать самому, а не он автоматически ездит по странице, и в итоге выходит, что даже на демо ко второму и третьему примерам нужно спускаться самому (ну, по крайней мере, я считаю такое поведение нетипичным для таких скриптов).
                  0
                  Возможно автор уже обновил скрипт, но у меня окно перемещается на следующий шаг.
                  Но есть еще одно пожелание: пусть будет плавный скролл к следующему объекту, потому что в противном случае не понятно, в какую часть страницы переносишься. Особенно если страница большой высоты.
                    0
                    Да, уже было обновление.
                  0
                  Действительно, интересная штуковина. Такой себе гид по странице. Удобно для презентаций.
                    +2
                    Закинул в воскресенье автору pull request на переключение шагов по Enter. Вроде сказал включит.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Нет, это не весь гем. Это его «самообновлятор», необязательный и, на мой взгляд, совсем не нужный. Сам гем состоит в том, что он помещает оригинальный intro.js по нужному пути в своей структуре (вот здесь) и регистрируется как Rails Engine, таким образом, чтобы при загрузке rails-приложение при обходе всех гемов заглядывало и в этот и использовало intro.js (и css) в asset pipeline приложения.

                        В общем-то да, это скорее плохой пример.
                        –1
                        Считаю это лишним, интерфейс сайта должен быть понятен и без его презентации. Тем более раздражают такие intro, которые появляются «сами» при первом посещении сайта, и не закрываются до тех пор, пока их все не прощелкаешь.
                          0
                          В целом — вы правы, но бывают представители заказчика и админки сайта которые никак друг с другом не совместимы.
                          Приходиться писать отдельные скринкасты. Такая штука сильно бы облегчила жизнь всем.
                          И потом, не забывайте, что есть не просто сайты-визитки, а сложные веб-проекты, например, социальные сети.
                          Посадите свою маму и включите ей какой-нить eBay, и посмотрите сколько ей потребуется времени на то, чтобы совершить покупку.
                          Пошаговая презентация на живом сайте сильно бы помогла.
                            +1
                            Если моя мама в одноклассниках разобралась, думаю ей уже ничего не страшно:)
                              0
                              вот когда она в Facebook разберется, то это будет реально подвиг.
                              0
                              для сайта в интернете — возможно. Для бизнес-приложения или интранет-портала в качестве прещентации нового модуля — отличная библиотека. Не все бизнес-приложения можно свести к гугл-стилю. Я лично буду пользоваться.
                            0
                            А существует ли такая библиотека для Android приложений?
                              0
                              Здоровски! Можно использовать для визардов, спасибо!
                                0
                                Кто уже успел попробовать, как впечатления? кстати, а можно ли следующий шаг разместить на новой странице, чтобы после перехода презентация продолжилась?

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое