Как сделать тур по сайту за 3 шага

Всем добрый день. Не так давно Я начал создавать свой проект по изучению HTML. В проекте есть интерактивные курсы по HTML Чуть позже будет объявлен набор на мой личный интесив по обучению созданию сайтов с нуля до востребованного специалиста. Если кому-то интересно то прошу вот сюда

Интерфейс проекта прост, но Я решил реализовать интересный тур по элементам интерфейса. В теории, Я понимал как написать такой тур, но все же решил погуглить. Нашел очень интересный и простой плагин joyride-feature-tour-plugin на jQuery. В этой статье Я максимально понятно постараюсь пояснить как эту всю красоту прикрутить к вашему сайту.

Шаг 0 Подключаем jQuery к Вашему сайту

Шаг 1 Подключаем внешние скрипты и стили которые надо скачать кликнув по кнопке ниже

Шаг 2 Теория

Два о слова о том, как работает плагин. Вобщем-то тут все просто.

Блокам которым будет применена подсказка присваивается ID причем его имя совершенно не имеет значения.

Порядок и текст подсказки указывается в упорядочено списке код которого находится в конце страницы. Чуть схемок:

Без имени-1

Пункту списка можно задать атрибут дата в котором можно указать текст кнопки data-button=»» и расположение подсказки data-options=»tipLocation:left».

Шаг 3 Настройка

С помощью инструмента для веб мастера  находим код нужного нам блока и при необходимости указываем родительскому блоку атрибут class с любым именем. Такое делаем для всех блоков которые необходимо «объяснить»

Далее открываем код страницы на которой находятся эти блоки и в конце всего кода вставляем (если есть </body> то перед ним):

<ol id="joyRideTipContent">
   <li data-class="worklist" data-button="Далее" data-options="tipLocation:left">Текст подсказки</li>
   <li data-class="wowbox" data-button="Далее" data-options="tipLocation:left">Текст подсказки</li>
   <li data-class="worklist" data-button="Закрыть" data-options="tipLocation:left">Текст подсказки</li>
</ol>

 

где worklist это класс первого блока wowbox это класс второго блока и т.д. Имена могут быть любыми.

Порядок появления подсказок сверху вниз по списку.

Шаг 4 Инициализация

Осталось инициализировать наш чудо скрипт. Для этого добавьте следующий код после </ol> (конец кода выше)

<script type='text/javascript'>
(function($) {
  $(function() { 
    $('#joyRideTipContent').joyride({
      autoStart : true,  
      'cookieMonster': true, // true/false для использования cookie
      'cookieName': 'JoyRide', // имя кук
      'cookieDomain': false, //привязка кук к домену
      postStepCallback : function (index, tip) {
        if (index == 2) {
          $(this).joyride('set_li', false, 1);
        }
      },
      modal:true,
      expose: true
    });  
  });
})(jQuery)  
</script>

Я думаю нет смысла пояснять значения опций.

Самые необходимые настройки есть в коде выше но вот еще

'tipLocation': 'bottom',         // Расположение всех подсказок
  'nubPosition': 'auto',           // override on a per tooltip bases
  'scrollSpeed': 300,              // Скорость прокрутки
  'timer': 2000,                   // 0 = off, применимо ко всем подсказкам = time(ms) таймер автоплея 
  'startTimerOnClick': true,       // true/false использовать таймер. Стартует после первого пункта
  'nextButton': true,              // true/false показывать кнопку "Далее"
  'tipAnimation': 'pop',           // 'pop' или 'fade' анимация
  'pauseAfter': [],                // массив селектором при которых сделать паузу
  'tipAnimationFadeSpeed': 300,    // или 'fade'- анимация 
  'cookieMonster': true,           // true/false куки
  'cookieName': 'JoyRide',         // имя куки
  'cookieDomain': false,           // использовать куки для всего сайта
  'tipContainer': body,            // контейнер/родитель подсказок
  'postRideCallback': $noop,       // событие после окончания тура
  'postStepCallback': $noop        // событие после каждой подсказки

Еще один пример работы можно посмотреть на странице одного из уроков http://learn.mexalim.com.ua/zagolovok-stranicy/

Удачи 🙂

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$