EnjoyHint — ефектні підказки для сайту

25

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

EnjoyHint — ефектні підказки для сайту

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

Мене звати Віктор Гавриленко, за освітою я інженер електромеханік. Ще навчаючись в інституті, почав захоплюватися комп’ютерними технологіями та програмуванням, протягом двох років посилено займаюся розробкою інтернет-сайтів та веб-програмуванням. Захоплююсь написанням невеликих скриптів на мові PHP, у зв’язці базами даних MySQL, SQLite, непогано знаю такі движки як WordPress, Drupal, Joomla.

EnjoyHint — ефектні підказки для сайтуEnjoyHint — ефектні підказки для сайту

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

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

EnjoyHint — ефектні підказки для сайту

Трохи нижче розташовується посилання для скачування останньої актуальної версії, що ми власне і робимо. У скачаному архіві нас цікавлять лише два файлу enjoyhint.js і enjoyhint.css. Тобто логіка бібліотеки та стилі оформлення основних елементів відповідно.

EnjoyHint — ефектні підказки для сайту

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

EnjoyHint — ефектні підказки для сайту

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

На цьому установка бібліотеки завершена, і ми можемо приступати до роботи з нею. Першим ділом, створюємо головний об’єкт бібліотеки.

var enjoyhint = new EnjoyHint();

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

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

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

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

Зверніть увагу на ім’я створеного властивості об’єкта. Воно складається з двох частин:

Подія підказки, тобто яку дію закриє цю підказку або відкриє наступну. В нашому випадку використовується подію click, тобто клік мишею по елементу, до якого прив’язана підказка.

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

В якості значення властивості, використовується текст, який буде відображати підказка. Наступний етап — передача масиву з підказкою об’єкту бібліотеки EnjoyHint і для цього використовується метод set():

enjoyhint.set(array_enjoy);

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

enjoyhint.run();

У браузері ми побачимо наступний результат:

EnjoyHint — ефектні підказки для сайту

Далі, давайте додамо наступну підказку, але використовуючи другий варіант.

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 – в даному властивості Ви можете описати функцію, код якої виконається перед відображенням підказки.

При цьому на екрані ми побачимо наступне.

EnjoyHint — ефектні підказки для сайту

Властивість 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
}
];

На екрані ми побачимо наступне.

EnjoyHint — ефектні підказки для сайту

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