Создание пошаговой инструкции с Intro.Js

demosourse

Существует множество плагинов для организации онлайн инструкций или туров по странице. Подобный приём очень полезен, особенно для тех кто посещает вашу страницу впервые. Таким образом, вы сразу можете обозначить важные моменты, помимо меню, тем самым ещё больше заинтересовав ваших новых пользователей.

Сегодня мы поговорим о jQuery плагине, который называется Intro.js. Мне нравится в этом плагине всё, включая эффект затемнения и возможность править CSS под свои нужды. Для его работы нужен всего-лишь подключение jQuery и файлы CSS/JS самого плагина. Если вы знакомы с jQuery, то без проблем разберётесь с тем, как применить данный плагин.

В качестве демо, я буду использовать страницу CSS Equal Height. Воспользуюсь её интерфесом, чтобы организовать тур.

Стартуем

Я не очень хочу останавливаться на HTML или CSS, потому как всё зависит от содержания ваших страниц. Однако, есть кое что, на чём я бы хотел заострить своё внимание. С плагином Intro.js у вас есть несколько возможностей настройки необходимых “шагов” тура. Их можно захардкодить в JavaScript массив, как это сделал я, или прикрепить к HTML атрибутам.

Вот пример, с официальной странички плагина:

<h1 data-step="1" data-intro="Hello all! :) This project's called Intro.js.">Intro<span style="font-weight: normal;">.js</span></h1>

data-step определяет номер шага вашего тура, который будет отображаться в тултипе.

Я предпочитаю делать то же самое через JS, потому как в результате этого HTML код становится чище, и все необходимые настройки находятся в одном месте, а не разбросаны по всей странице.

В принципе, вы можете воспользоваться и HTML5 атрибутами data-*.

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Live Demo Tour</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/demo-style.css">
<link rel="stylesheet" type="text/css" href="css/introjs.css">
<script type="text/javascript" src="http://demo.hongkiat.com/_nav/js/nav.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
</head>

Таким образом, мы подключили все необходимые файлы для функционирования плагина. Я не хочу сейчас говорить о стилях, т.к. непосредственно к теме урока они не относятся.

Все эти файлы вы сможете найти на странице скачивания плагина с Github.

Небольшие исправления CSS

Вообще файл introjs.css содержит целый набор неплохих стилей. Однако, вы можете из заменить на собственные, если вам это необходимо. Сейчас я отредактирую размер текста и расстояние между строками.

#tourbtn {
  position: fixed;
  right: 15px;
  bottom: 35px;
}
#tourbtn a {
  background: #bac081;
  padding: 8px 15px;
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
  color: #454a50;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#tourbtn a:hover {
  background: #cacf96;
}

Другие стили используются для оформления кнопки, которую вы сможете найти в нижнем правом углу страницы. Она служит для активации тура. В моём случае, тур начнётся автоматически, но для себя вы решайте сами, как удобнее.

JQuery и Intro.Js

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

Однако, можете записать весь JS код в один файл и подключить в конце.

$(function(){
  var introguide = introJs();
  // var startbtn   = $('#startdemotour');
}

Во-первых, мы создаём переменную (introguide), куда записываем объект плагина introJS. Переменная startbtn может использоваться для настройки кнопки активации тура. Теперь нам нужно настроить каждый шаг тура в отдельности.

introguide.setOptions({
    steps: [
        {
          element: '.nav-bar',
          intro: 'This guided tour will explain the Hongkiat demo page interface.

Use the arrow keys for navigation or hit ESC to exit the tour immediately.', position: 'bottom' }, { element: '.nav-logo', intro: 'Click this main logo to view a list of all Hongkiat demos.', position: 'bottom' }, { element: '.nav-title', intro: 'Hover over each title to display a longer description.', position: 'bottom' }, { element: '.readtutorial a', intro: 'Click this orange button to view the tutorial article in a new tab.', position: 'right' }, { element: '.nav-menu', intro: "Each demo will link to the previous & next entries.", position: 'bottom' } ] });

Все эти данные передаются в метод настроек introguide.setOptions({}) плагина. Мы передаём массив, с набором объектов, каждый из которых представляет из себя отдельный шаг тура. В качестве элементов указываем jQuery селекторы. Использовать классы, не рекомендуется, однако если вы используете его единожды на странице, то можно.

По умолчанию значение опции position равно bottom. Я писал данную опцию везде, для большей ясности.

Всё что нам осталось сделать, так это активировать плагин, вызвав introguide.start(). В последствии к нему можно прикрепить обработчик клика по кнопке. Это не обязательно, и тур можно запустить при полной загрузке DOM-а.

introguide.start();
/**
    startbtn.on('click', function(e){
      e.preventDefault();
      introguide.start();
      $(this).hide();
    });

     * по окончанию тура, отображаем кнопку
    introguide.oncomplete(function() {
      if(startbtn.css('display') == 'none') {
        startbtn.show();
      }
    });
    introguide.onexit(function() {
      if(startbtn.css('display') == 'none') {
        startbtn.show();
      }
    });
**/

Так же мы можем воспользоваться функцией обратного действия, которая запустится по окончанию тура. Я специально закомментировал этот код, но вы можете поиграть с дополнительными возможностями плагина.

Мне нравится Intro.js, потому что он очень прост в использовании, и по нему написана хорошая документация. Его можно применять абсолютно к любым страницам, главное чтобы был подключён jQuery.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/
Перевел: Станислав Протасевич
Урок создан: 29 Июля 2013
Просмотров: 20451
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 29 Июля 2013 23:04
    JeiQst
    такое очень пригодитса !!!
  • 29 Июля 2013 23:05
    JeiQst
    а есть другие аналоги ?
    • 14 Октября 2013 23:02
      Bonham
      вот здесь все аналоги указаны - http://stackoverflow.com/questions/10707882/interactive-tutorial-for-a-web-app/10708053#10708053
  • 30 Июля 2013 11:29
    technokid
    А можно ли сделать еще и переходы по страницам и продолжение инструкции?
  • 31 Июля 2013 02:54
    pashasmp2
    Прикольная штука, но думаю было бы получше если после закрытия окна подсказки и обновления страницы оно больше не появлялось.
    • 31 Июля 2013 11:59
      technokid
      Ну так ти можеш проверять наличие кукисов, и выводить только тогда, когда их нет, то есть при первом входе на сайт.
  • 17 Февраля 2014 18:55
    t_mclagen
    Вот где был этот плагин, когда я искал интерактивные подсказки! Пришлось написать свой плагин, не смотря на минимальные знания jquery, плагин получится у меня практически аналогичным, правда немного поудобнее и красивее. Насчет кукисов не согласен, они работает ведь для дирректории, а не для определенных страниц, так что в голову не приходит как организовать первичное появление именно на странице, а не на сайте в целом.
^ Наверх ^