От автора: в данном уроке я хотел бы представить Вашему вниманию достаточно интересную библиотеку, белоруской команды разработчиков, под названием EnjoyHint, которая позволяет легко создать на сайте, интерактивные подсказки, упрощающие навигацию.
 |
Автор: Виктор ГавриленкоМеня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla. |
ИтакEnjoyHint – это бесплатный инструмент, который отлично подходит для создания интерактивных подсказок и практически готовых туториалов, то есть руководств, которые можно добавить в свое веб-приложение, тем самым повысив удобство и эффективность его использования.
EnjoyHint позволяет добавлять простые подсказки наряду с мгновенной автофокусировкой на соответствующей зоне или элементе с его подсветкой. Для установки библиотеки, переходим на официальный сайт разработчиков.
Немного ниже располагается ссылка для скачивания последней актуальной версии, что мы собственно и делаем. В скачанном архиве нас интересуют ровно два файла enjoyhint.js и enjoyhint.css. То есть логика библиотеки и стили оформления основных элементов соответственно.
Таким образом, enjoyhint.js – я скопирую в каталог js, тестового проекта, а enjoyhint.css – в папку со стилями css. В данном уроке я буду использовать следующий тестовый сайт.
Данный шаблон был скачан из сайта //getbootstrap.com, как тестовый для сегодняшнего урока. После копирования вышеуказанных файлов, необходимо их подключить на странице, на которой будут отображаться подсказки.
|
1 2 |
<link href="css/enjoyhint.css" rel="stylesheet"> <script src="js/enjoyhint.js"></script> |
На этом установка библиотеки завершена, и мы можем приступать к работе с ней. Первым делом, создаем главный объект библиотеки.
|
1 |
var enjoyhint = new EnjoyHint(); |
Далее необходимо сформировать подсказки, для будущего отображения их на экране браузера.
Подсказки создаются в виде массива объектов. Причем объект – описывает одну отдельную подсказку и каждый из них располагается в конкретной ячейке массива. При этом, если в массиве присутствует несколько ячеек, значит Вы создали несколько подсказок, которые будут отображаться на экране при выполнении определенных условий. Поэтому создадим первую подсказку.
Объект, представляющий подсказку, может быть создан двумя способами: упрощенно, и более расширено. Для начала рассмотрим первый.
|
1 2 3 4 5 6 |
var array_enjoy = [ { 'click .new_btn':'Кликните мышью по кнопке!', } ]; |
Обратите внимание на имя созданного свойства объекта. Оно состоит из двух частей:
Событие подсказки, то есть какое действие закроет данную подсказку или откроет следующую. В нашем случае, используется событии click, то есть клик мышью по элементу, к которому привязана подсказка.
Селектор элемента, к которому будет привязана подсказка.
В качестве значения свойства, используется текст, который будет отображать подсказка. Следующий этап — передача массива с подсказкой объекту библиотеки EnjoyHint и для этого используется метод set():
|
1 |
enjoyhint.set(array_enjoy); |
Далее запускаем скрипт на исполнение, методом run():
|
1 |
enjoyhint.run(); |
В браузере мы увидим следующий результат:
Далее, давайте добавим следующую подсказку, но используя второй вариант.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 – показывать ли кнопку перехода к следующей подсказке.
Таким образом, давайте создадим очередную подсказку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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 } ]; |
На экране мы увидим следующее.
Собственно вот и все, что я хотел рассказать Вам о данной библиотеке. Надеюсь, она Вас заинтересовала, и Вы будете использовать ее в своих наработках. Всего Вам доброго и удачного кодирования!!!
Комментарии (4)