EnjoyHint — эффектные подсказки для сайта

EnjoyHint - эффектные подсказки для сайта

От автора: в данном уроке я хотел бы представить Вашему вниманию достаточно интересную библиотеку, белоруской команды разработчиков, под названием EnjoyHint, которая позволяет легко создать на сайте, интерактивные подсказки, упрощающие навигацию.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

ИтакEnjoyHint – это бесплатный инструмент, который отлично подходит для создания интерактивных подсказок и практически готовых туториалов, то есть руководств, которые можно добавить в свое веб-приложение, тем самым повысив удобство и эффективность его использования.

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

Немного ниже располагается ссылка для скачивания последней актуальной версии, что мы собственно и делаем. В скачанном архиве нас интересуют ровно два файла enjoyhint.js и enjoyhint.css. То есть логика библиотеки и стили оформления основных элементов соответственно.

Таким образом, enjoyhint.js – я скопирую в каталог js, тестового проекта, а enjoyhint.css – в папку со стилями css. В данном уроке я буду использовать следующий тестовый сайт.

Данный шаблон был скачан из сайта http://getbootstrap.com, как тестовый для сегодняшнего урока. После копирования вышеуказанных файлов, необходимо их подключить на странице, на которой будут отображаться подсказки.

<link href="css/enjoyhint.css" rel="stylesheet">
<script src="js/enjoyhint.js"></script>

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

var  enjoyhint = new EnjoyHint();

Далее необходимо сформировать подсказки, для будущего отображения их на экране браузера.

Подсказки создаются в виде массива объектов. Причем объект – описывает одну отдельную подсказку и каждый из них располагается в конкретной ячейке массива. При этом, если в массиве присутствует несколько ячеек, значит Вы создали несколько подсказок, которые будут отображаться на экране при выполнении определенных условий. Поэтому создадим первую подсказку.

Объект, представляющий подсказку, может быть создан двумя способами: упрощенно, и более расширено. Для начала рассмотрим первый.

var array_enjoy = [
	{
		'click .new_btn':'Кликните мышью по кнопке!',
	
	}
]; 

Обратите внимание на имя созданного свойства объекта. Оно состоит из двух частей:

Событие подсказки, то есть какое действие закроет данную подсказку или откроет следующую. В нашем случае, используется событии click, то есть клик мышью по элементу, к которому привязана подсказка.

Селектор элемента, к которому будет привязана подсказка.

В качестве значения свойства, используется текст, который будет отображать подсказка. Следующий этап — передача массива с подсказкой объекту библиотеки EnjoyHint и для этого используется метод set():

enjoyhint.set(array_enjoy); 

Далее запускаем скрипт на исполнение, методом run():

enjoyhint.run(); 

В браузере мы увидим следующий результат:

Далее, давайте добавим следующую подсказку, но используя второй вариант.

var array_enjoy = [

	{
		'click .new_btn':'Кликните мышью по кнопке!',
		
	},
	{
		selector:'.new_btn2',
		event:'next',
		description:'Кликните мышью по кнопке!',
		showNext:true,
		onBeforeStart:function() {
			alert('Hello');
		}
		
	}

]; 

По сути, смысл один и тот же, разница только в том, что в объекте, представляющем подсказку, мы формируем специальные свойства, в которых указываются данные всплывающего сообщения:

selector – селектор элемента, к которому будет привязан подсказка;

event – событие. Здесь я использовал событие next, то есть подсказка будет закрыта или же будет осуществлен переход к следующей подсказке, только после нажатия по кнопке ”Next”.

description – текст который будет отображаться на экране;

showNext – если указать значение true, будет показана кнопка “Next” – переход к следующей подсказке;

onBeforeStart – в данном свойстве Вы можете описать функцию, код которой выполнится перед отображением подсказки.

При этом на экране мы увидим следующее.

Свойство onBeforeStart, Вы конечно же, можете использовать и в первом варианте создания массива. Так же для каждой подсказки Вы можете использовать дополнительные настройки:

timeout – пауза в миллисекундах перед появление подсказки;

shape – форма блока фокусировки элемента к которому привязана подсказка. Поддерживаемые значения – circle (круг) и rect (прямоугольник).

radius – радиус области фокусировки, при настройке shape – circle;

margin – отступ от блока, к которому привязана подсказка до блока фокусировки, актуально при shape = rect;

scrollAnimationSpeed — скорость анимации скролла к фокусируемому элементу;

nextButton – пользовательские параметры кнопки перехода к следующей подсказке (представляет собой объект).

skipButton – пользовательские параметры кнопки выхода из системы подсказок (представляет собой объект).

showSkip – показывать ли кнопку выходу из системы подсказок;

showNext – показывать ли кнопку перехода к следующей подсказке.

Таким образом, давайте создадим очередную подсказку.

var array_enjoy = [

	{
		'click .new_btn':'Кликните мышью по кнопке!',
		
	},
	{
		selector:'.new_btn2',
		event:'next',
		description:'Кликните мышью по кнопке!',
		showNext:true,
		onBeforeStart:function() {
			alert('Hello');
		}
		
	},
	{
		'click .new_btn3':'Кликните мышью по кнопке!',
		timeout:5000,
		shape:'circle',
		radius:100
		margin:50,
		scrollAnimationSpeed:3000,
		
		nextButton:{
			className:'myClass',
			text:'Следующая'
		},
		skipButton:{
			className:'myClass',
			text:'Отмена'
		},
		
		showSkip:true,
		showNext:true
	}

]; 

На экране мы увидим следующее.

Собственно вот и все, что я хотел рассказать Вам о данной библиотеке. Надеюсь, она Вас заинтересовала, и Вы будете использовать ее в своих наработках. Всего Вам доброго и удачного кодирования!!!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Maksim

    Здравствуйте! очень хорошо объясняете ! волнует такой вопрос? произвести вариант без кнопок. Зашли на сайте интерактивная подсказка показала сама . каких либо нажатий ? и в конце отключилась

    Благодарю за ответ в помощь!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree