9236 Андрей Барткевич 10 Февраля 2017



Bootstrap Tour: создание на сайте виртуального тура Web технологии

Современные веб-приложения могут быть сложными для понимания их функционала “с первого взгляда”. Это могут быть какие-то специализированные порталы, биллинги, системы статистики или управления чем-либо, что угодно с интерфейсом сложнее, чем обычно. Виртуальный тур, выполняющий роль помощника пожалуй самый лучший способ познакомить пользователя с интерфейсом, “провести его за ручку” и показать что к чему. Для этой задачи был создан такой инструмент как Bootstrap Tour. О том, как его использовать мы и поговорим.

Использование библиотеки

<link href=“css/bootstrap-tour.min.css” rel=“stylesheet">
 <script src=“js/bootstrap-tour.min.js”></script>

Если же вы НЕ пользуетесь Bootstrap, то вам нужно подключить специальную версию файлов, вот так:
<link href=“css/bootstrap-tour-standalone.min.css” rel=“stylesheet">
<script src=“js/bootstrap-tour-standalone.min.js”></script>

Начинаем наш тур

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

<h1 class="one">Заголовок</h1>
<div class="two">
<a href="#">Ссылка</a>
</div>
Для начала, нам нужно инициализировать наш тур.
<script type="javascript">
 var tour = new Tour({
   // Код нашего тура
 })
 </script>
Теперь нужно сделать “шаги” для тура. В нашем случае тур будет состоять из двух шагов. Каждый шаг описывается тремя обязательными параметрами: ссылка на элемент, к которому привязан шаг, заголовок и описание. Код будет выглядеть как-то так:
var tour = new Tour({
   steps: [
   {
     element: ".one",
     title: "Здравствуйте",
     content: "Добро пожаловать в виртуальный тур."
   },
   {
     element: ".two",
     title: "Это ссылка",
     content: "Если нажать на эту ссылку - ничего не произойдет."
   }  
 ]
 });
Если нужно запустить тур сразу, как только загрузится страница:
 tour.init();
 tour.start();
Если же мы хотим начать тур после какого-то события, например при нажатии пользователем на кнопку:

$(‘.element’).click(function(){
   tour.start();
 }); 

Результат

See the Pen Bootstrap Tour by oleg kobrin (@olegkobrin) on CodePen.



Другие параметры

Name – позволяет задать уникальное имя для тура. Нужно, если вы хотите разместить несколько туров на одной странице.

Steps – обязательный параметр. Содержит информацию о шагах тура. Должен быть описан как минимум один шаг.

Container – по умолчанию всплывающее окно добавляется к body. С помощью этой опции его можно привязать к любому другому элементу на странице.

Keyboard – может ли пользователь перемещаться между окнами с помощью мыши. По умолчанию – true.

Storage – указывает где хранится информация о посещении пользователем тура. По умолчанию это LocalStorage. Его можно поменять на window.sessionStorage или отключить вообще. Тогда тур будет начинаться каждый раз при перезагрузки страницы.

Backdrop – Показать фон в lightbox стиле.

Duration – Продолжительность шага. Задается в секундах. Если пользователь за это время не перешел к следующему шагу, переход осуществляется автоматически.

Template – позволяет настроить собственный шаблон всплывающего окна.

Functions – мы можем определить функции, которые будут выполнятся при наступлении определенных событий, а именно:  OnStart , OnEnd , OnShow , OnShown , OnHide , onHidden , OnNext , onPrev , OnPause , onResume.

Демо
Github

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов