Enjoyhint. Создание интерактивных подсказок на сайте.

Всем привет! Хочу рассказать о создании интерактивного тура по сайту с помощью Enjoyhint. Эта небольшая библиотека предоставляет функционал для достаточно наглядных подсказок, что позволит вам легко и просто провести первый инструктаж по работе со своим ресурсом. Чтобы увидеть, как все работает, можно взглянуть на демку http://xbsoftware.github.io/enjoyhint/, где можно наглядно понять, что это такое и с чем его едят :). Понравилось? Тогда будем разбираться, как нам сделать тоже самое. Для подключения нам потребуется jQuery не младше 1.7. Есть еще требование к подключению KineticJS v5.1.0, но она включена в файл скрипта, поэтому по факту, заботимся только о jQuery.

Подключаем последовательно все необходимое.

<!-- Подключаем jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Подключаем скрипт Enjoyhint-->
<script src="/enjoyhint/enjoyhint.min.js"></script>
<!-- Подключаем стили Enjoyhint-->
<link href="/enjoyhint/enjoyhint.css" rel="stylesheet">
<!-- Подключаем собственный скрипт с инициализацией работы Enjoyhint-->
<script type="text/javascript" src="/js/dispatch_enjoyhint.js"></script>

А теперь разберем код инициализации работы.

$(function(){
	var enjoyhint_instance = new EnjoyHint({});//Создаем экземпляр класса EnjoyHint
	//Создаем массив со списком шагов
	var enjoyhint_script_steps = [ //Каждый шаг - объект
									{//Событие next с переходом по кнопке "Next" , в нашем случае - "Понял!"
										'next #testid .testclass1' : 'Для перехода к следующему шагу обязательно нажмите кнопку "Понял!".',
										'nextButton' : {className: "myNext", text: "Понял!"},//Переименовываем кнопку Next
										'skipButton' : {className: "mySkip", text: "Закрыть!"},//Переименовываем кнопку Skip
										'shape': 'circle',
										'radius': 80
									},
									{//Событие click с необходимтью кликнуть на объект
										'click .testclass2' : 'Для перехода к следующему шагу нужно кликнуть на объект',
									},
									{//Событие key с обработкой нажатия клавиши
										'key .testclass3' : 'Для перехода к следующему шагу нужно нажать Enter',
										'keyCode' : 13,
										'shape': 'rect'
									},
	                             ];
	//Применям настройки, путим передачи шагов в объект
	enjoyhint_instance.set(enjoyhint_script_steps);
	//Запускаем Гайд!
	enjoyhint_instance.run();
});

Постарался все максимально прокомментировать в коде, надеюсь понятно. Как это работает лично у меня можно посмотреть на видео:

Для более подробной справки, можно обратится к официальному небольшому руководству на гит хабе https://github.com/xbsoftware/enjoyhint/blob/master/README.md. Скачать библиотеку можно по адресу https://github.com/xbsoftware/enjoyhint загружаем zip-архив, распаковываем и начинаем колдовать 🙂

Хочу предупредить о паре вещей. Первая связана с тем, что если на странице не окажется ни одного объекта, указанного в селекторах, то скрипт все равно разок запустится. Как… не очень хорошо, со смещением всех кнопок в верхний левый угол, так что отслеживайте это. Второй момент — это запуск гайда. По умолчанию всегда. То есть при каждой перезагрузке страницы будет запускаться гайд, поэтому контроль запуска ложиться на ваши плечи. Это достаточно логично, ведь серверной части у библиотеки нет, а делать контроль запуска на кэше — это до первой его очистки.

P. S. Библиотека отлично справляется с возложенными на нее функциями. Для эстетов никто не отменял возможность переопределять внешний вид. Изменяйте что хотите и как хотите. Все достаточно просто и не вызывает трудностей, хотя смотрится довольно неплохо.

Если остались вопросы, пишите в комментариях, постараюсь ответить.