Виртуальный тур по вашему сайту или приложению

December 24, 2014

Представляю вам простой и легкий фреймворк на Javascript для быстрого и удобного создания виртуального тура по вашему сайту или приложению.

Hopscotch


Имя этого фреймворка - Hopscotch. Этот фреймворк принимает в качестве опций обычный JSON объект и предлагает разработчикам интерфейс для удобного и простого позиционирования каждого шага тура.

Основные преимущества

  • Коллбэки (например, onStart, onEnd, onShow, onNext, onPrev, onClose)
  • Возможность работы со множеством страниц по средствам sessionStorage (используются Cookies в качестве запасного варианта)
  • Интернационализация
  • и т.д.

Как использовать


Для начала использования просто подключите hopscotch.css и hopscotch.js на странице. Эти действия подключат объект в глобальную область видимости js.

    

Мой первый тур по сайту



Мой первый тур по сайту

Контент помещается здесь...







В файле my_first_tour.js опишите и запустите ваш тур.

 // определение тура
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "Мой заголовок",
content: "Это заголовок на моей странице.",
target: "header",
placement: "right"
},
{
title: "Мой контент",
content: "Здесь я размещаю свой контент.",
target: document.querySelector("#content p"),
placement: "bottom"
}
]
};

// Запустите ваш тур по сайту
hopscotch.startTour(tour);


И это все что требуется!

Определение шагов тура


Hopscotch содержит ID тура, массив шагов, определенный в виде JSON данных где для каждого шага указываются специфические настройки. ID тура простой и уникальный идентификатор-строка. Тур должен содержать как минимум ID тура и массив из 1 или более шагов.

Основные настройки шагов тура

    {
id: "welcome_tour",
steps: [
{
target: "header",
placement: "bottom",
title: "Это основное меню сайта",
content: "Используйте меню для навигации по сайту"
},
{
target: "profile-pic",
placement: "right",
title: "Изображение вашего профиля",
content: "Загрузите изображение кликнув по этой кнопке."
},
{
target: "inbox",
placement: "bottom",
title: "Ваша почта",
content: "Сообщения от других участников сайта."
}
]
}

Очень важно: title и content указываются с помощью element.innerHTML. Это позволяет вставлять html элементы в эти поля. Будьте осторожны, помимо html туда можно вставить и вредоносный код. Всегда проверяйте, что вставляете в это поле.

Основной список настроек шагов тура:

 Обязательные

  • target [STRING/ELEMENT/ARRAY] - id DOM элемента или сам DOM элемент, к которому привязывается шаг. Также можно указать массив из нескольких элементов. В этом случае Hopscotch прикрепит шаг к первому найденному элементу из списка.
  • placement [STRING] - указывается где будет выводиться всплывающее окошко. Возможные значения: "top", "bottom", "right", "left".

Необязательные

  • title [STRING] - заголовок шага
  • content [STRING] - Содержимое
  • width [INT] - ширина всплывающего окна
  • padding [INT] - паддинг всплывающего окна
  • xOffset [INT] - горизонтальное положение для всплывающего окна. Значение можно указать в пикселях или "center". По умолчанию: 0.
  • yOffset [INT] - вертикальное положение для всплывающего окна. Значение можно указать в пикселях или "center". По умолчанию: 0.
  • arrowOffset [INT] - положение стрелки всплывающего окна. Значение можно указать в пикселях или "center". По умолчанию: 0.
  • delay [INT] - сколько милисекунд ждать перед переходом к следующему шагу. По умолчанию: 0.
  • zindex [INT] - z-index для всплывающего окна
  • showNextButton [BOOLEAN] - Показывать кнопку далее. По умолчанию: true.
  • showPrevButton [BOOLEAN] - Показывать кнопку назад. По умолчанию: true.
  • showCTAButton [BOOLEAN] - Показывать кнопку call-to-action. По умолчанию: false.
  • ctaLabel [STRING] - заголовок для кнопки call-to-action.
  • multipage [BOOLEAN] - следует ли считать следующий шаг на другой странице. По умолчанию: false.
  • showSkip [BOOLEAN] - Если true, кнопка 'Далее' определяется как 'Пропустить'. Default: false.
  • fixedElement [BOOLEAN] - укажите true если требуемый элемент имеет фиксированное позиционирование. По умолчанию: false.
  • nextOnTargetClick [BOOLEAN] - вызывает событие nextStep() когда по требуемому элементу кликнули мышкой. По умолчанию: false.

События

  • onPrev [FUNCTION] - коллбэк на событие нажатия кнопки "Назад"
  • onNext [FUNCTION] - коллбэк на событие нажатия кнопки "Далее"
  • onShow [FUNCTION] - коллбэк на событие показа первого шага
  • onCTA [FUNCTION] - коллбэк на событие нажатия кнопки "call-to-action"

Настройки тура в целом


Настройки могут быть указаны с использованием JSON данных или вызовом метода hopscotch.configure(). Данные настройки применяются ко всему туру на странице. В случае когда настройки тура перекрещиваются с настройками отдельнго шага , (например, "showPrevButton") приоритет отдается настройкам шага. Когда коллбэки определяются и в туре, и в шаге, то вызывается сначала коллбэк шага, затем коллбэк тура.

  • id [STRING] - Обязательно: уникальный строковый идентификатор тура.
  • bubbleWidth [NUMBER] - Ширина всплывающего окна по умолчанию. По умолчанию: 280.
  • bubblePadding [NUMBER] - Паддинг всплывающего окна по умолчанию. По умолчанию: 15.
  • smoothScroll [BOOLEAN] - Использовать ли плавную прокрутку к следующему шагу? По умолчанию: true.
  • scrollDuration [NUMBER] - Время, которое должно потратиться на скроллинг страницы в ms. Работает только если smoothScroll установлен в true. По умолчанию: 1000.
  • scrollTopMargin [NUMBER] - Когда страница скролится, сколько места должно быть между всплывающим окном и верхом вьюпорта? По умолчанию: 200.
  • showCloseButton [BOOLEAN] - Надо ли показывать кнопку "закрыть"? По умолчанию: true.
  • showPrevButton [BOOLEAN] - Надо ли показывать кнопку назад? По умолчанию: false.
  • showNextButton [BOOLEAN] - Надо ли показывать кнопку далее? По умолчанию: true.
  • arrowWidth [NUMBER] - Ширина стрелки по умолчанию (место между всплывающим окном и требуемым элементом). Используется для калькуляции позиции всплывающего окна. Опция пригодится, если вам потребуется изменить стрелку в вашем css. По умолчанию: 20.
  • skipIfNoElement [BOOLEAN] - Если указанный элемент не найден, надо ли переходить к следующему шагу? По умолчанию: true.
  • nextOnTargetClick [BOOLEAN] - Надо ли переходить к следующему шагу после клика по требуемому элементу? По умолчанию: false.
  • onNext [FUNCTION] - Выполняется после каждого клика по кнопке "Далее".
  • onPrev [FUNCTION] - Выполняется после каждого клика по кнопке "Назад".
  • onStart [FUNCTION] - Выполняется перед началом тура.
  • onEnd [FUNCTION] - Выполняется после окончания тура.
  • onClose [FUNCTION] - Выполняется когда пользователь решил закрыть тур.
  • onError [FUNCTION] - Выполняется когда требуемый элемент не найден на странице.
  • i18n [OBJECT] - Для интернационализации. Позволяет изменять тексты кнопок и номеров шагов.
  • i18n.nextBtn [STRING] - Название кнопки "Далее"
  • i18n.prevBtn [STRING] - Название кнопки "Назад"
  • i18n.doneBtn [STRING] - Название кнопки "Закончить"
  • i18n.skipBtn [STRING] - Название кнопки "Пропустить"
  • i18n.closeTooltip [STRING] - Текст для тултипа кнопки закрыть


 

Думаю основные моменты в этой статье я раскрыл. Если будут вопросы, пишите комментарии либо обратитесь к странице проекта за примерами.

Комментарии

comments powered by Disqus