Создаем тур по сайту на одном дыхании

Установка плагина Joyride проста. Нужно присоединить файлы, немного отредактировать разметку и выбрать опции.

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

Шаг 1

Присоединяем файлы

Загружайте пакет плагина. Добавляйте следующую разметку в ваш документ в раздел <head>:s

/* Присоединяем файл Joyride CSS */
<link rel=" stylesheet" type="text/css" href="stylesheets/app.css">

/* Нужно присоединить библиотеку jQuery */
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

/* Затем присоеднияем плагин Joyride */
<script src="jquery.joyride.js" type="text/javascript"></script>

Шаг 2

Определяем остановки тура

Joyride работает с любыми элементами разметки. Единственное требование, чтобы элемент обладал уникальным ID для определения точки остановки. ID будет использоваться на следующем шаге для созадния описания тура.

/* Joyride может присоединяться к любым элементам с уникальным ID */
<h3 id="yourHeaderID"></h3>
<p id="yourParagraphID">

<a id="yourAnchorID" href="#url">

Шаг 3

Создаем описание тура

Создаем список с описанием точек остановки вашего тура в элементе <ol> для которого устанавливаем уникальный ID. Данный ID будет использоваться при определении опций далее. Для каждой остановки добавьте элемент <li> с атрибутом "data-id". Значение атрибута data-id должно соответствовать ID html элемента остановки. Также важен порядок следования элементов span class="inline-code"><li>, так как он задает порядок прохода по точкам остановки. Описываемы элемент <ol> следует размещать перед закрывающим тегом body.

Вы можете определять текст, который булет выводиться на кнопках в подсказках тура. Добавьте атрибут "data-text" с нужным текстом к элементу <li>. Также можно добавлять класс к элементам <li>, что позволяет задавать для каждой остановки определенный стиль.

/* Все подсказки устанавливаются в элементе <ol>. */
<ol id="chooseID">
  /* data-id соответствует тому элементу, к которому прикрепляется подсказка */
  <li data-id="newHeader">Содержание подсказки...</li>
  /* Использование атрибута 'data-text' дает возможность изменять название кнопок */
  <li data-id="parentElementID" data-text="Second Button">Содержание подсказки...</li>
  /* Вы можете использовать свои классы для определения стилей подсказок */
  <li data-id="parentElementID" class="custom-class">Содержание подсказки...</li>
</ol>

Шаг 4

Запускаем плагин

Код запуска плагин анужно разместить до закрывающего тега </body> вашей страницы. У плагина имеется несколько опций для настройки его действия в соответствиис вашими требованиями.

/* Запускаем плагин joyride после загрузки страницы */
<script type="text/javascript">
  $(window).load(function() {
    $(this).joyride({
      /* Опции нужно размещать здесь */
    });   
  });
</script>

Шаг 5

Опции

Данные опции позволяют определять процесс взаимодействия посетителей с туром Joyride.

/* Установите нужные вам значения */
$(this).joyride({
  'tipLocation': 'bottom',       // 'top' или 'bottom' по отношению к родительскому элементу
  'scrollSpeed': 300,            // скорость прокуртки страницы в миллисекундах
  'timer': 2000,                 // 0 = без таймера, все остальные значения = время таймера в миллисекундах 
  'startTimerOnClick': true,     // true или false - при значении true таймер будет запскаться после нажатия на первую ыкнопку
  'nextButton': true,            // true или false - управление выводом кнопки "следующий"
  'tipAnimation': 'pop',         // pop' или 'fade' для каждой подсказки
  'tipAnimationFadeSpeed': 300,  // когда tipAnimation = 'fade', данная опция указывает скорость перехода в миллисекундах
  'cookieMonster': true,         // true или false - управление использованием куки
  'cookieName': JoyRide,         // имя используемого куки
  'cookieDomain': false,         // присоединение куки к домену, например, '.notableapp.com'
  'tipContainer': body,          // куда присоединять подсказку, если не используется тип inline
  'inline': false,               // true или false, если true, то подсказка будет присоединяться после элемента
  'tipContent': #joyRideContent  // ID элемента <ol> с содержанием подсказок
}); 

Сделайте тур по своему сайту

Данный плагин распространяется по лицензии MIT!