Створення підказок для сайту з допомогою EnjoyHint

Друзі мої! Час від часу кожен з нас стикається з ситуацією, коли, потрапивши на новий для себе сайт, доводиться добряче помізкувати хвилину-другу, щоб зрозуміти, як там все влаштовано. Приблизно в такому ж становищі можна опинитися, виявивши радикальні (або не дуже) зміни в зовнішньому вигляді улюблених сайтів, будь то last.fm або Кинопоиск. Існують різні способи примирити користувачів з новим дизайном: від поступового знайомства з привнесеними нововведеннями («Спробуйте бета-версії оновленого сайту прямо зараз!») до створення покрокового гайда за новим можливостям. Про останньому варіанті ми сьогодні і поговоримо.

finding a way

Мета цієї статті — розповісти про процес створення інтерактивних підказок для сайту з допомогою EnjoyHint. Спочатку ми створимо підказку для окремого елемента. Потім подивимося, як можна створити послідовність підказок, які будуть запускатися одна за одною. Таким чином, у нас вийде інтерактивне керівництво по основних можливостями нашого сайту. В якості прикладу використовувався невеликий шаблон пошукача, написаний за допомогою Bootstrap.

Однією з залежностей є jQuery версії 1.7 або вище. Інша залежність — KineticJS версії 5.10, але, оскільки ця бібліотека вже включена в EnjoyHint, турбуватися про неї зайвий раз не варто.

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

EnjoyHint. Трохи теорії
З допомогою EnjoyHint можна створити послідовність інтерактивних підказок, які допоможуть вам пройти через численні елементи вашого сайту, попутно розповівши йому, які з них для чого призначені. Це може виявитися корисним у випадку складного веб-додатки з великою кількістю елементів.

Можна виділити, наприклад, окрему кнопку і розповісти, для чого вона потрібна. Також можна взяти відвідувача сайту за руку і провести його через весь сайт, попутно пояснюючи, що і для чого варто використовувати. При цьому ви можете застосовувати власні стилі до текстів підказок і змінювати форму і границі виділеної області.

Основні фічі:

  1. Автоматичний фокус і підсвічування обраної області
  2. Зміна форми і меж — виділеній області
  3. Можливість задатьзадержку появи підказки
  4. Можливість продолжитьпрерванную послідовність підказок
  5. Крос-браузерна підтримка (Chrome, FireFox, IE10+, Safari)
  6. Підтримка пристроїв з сенсорним екраном під управлінням Android, iOS і Windows
На цьому, мабуть, теоретичну частину можна завершити і перейти безпосередньо до написання коду.

Створення підказки
В якості прикладу я зробив ось таку маленьку модель пошукача:

TurboSearch

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

bower install enjoyhint


Або завантажити його з цієї сторінки на GitHub. В якості прикладу ми використовуємо другий варіант.

Додаємо jQuery і необхідні js і css-файли з архіву EnjoyHint:

< script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

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

Я помістив весь код, необхідний для створення підказок, в окремий файл `hint-sequence.js`:

< script src="hint-sequence.js"></script>


Ініціалізація EnjoyHint
Для початку потрібно створити новий екземпляр об'єкта EnjoyHint:

var enjoyhint_instance = new EnjoyHint({});


Тепер ми можемо створити опис підказки:

var enjoyhint_script_steps = [
{
/*код підказки*/
} 
];

Або, якщо вам потрібно створити послідовність з кількох підказок:

var enjoyhint_script_steps = [
{
/*код першої підказки*/
},
{
/*код другої підказки*/
}
];

Далі, з допомогою методу `set` ми вибираємо створену послідовність в якості конфігурації:

enjoyhint_instance.set(enjoyhint_script_steps);

Все готово. Тепер можна запустити наш скрипт:

enjoyhint_instance.run();


Опис підказки
В якості першого прикладу ми створимо підказку, яка розповість відвідувачеві сайту про призначення кнопки «Фільтр»:

var enjoyhint_script_steps = [
{
'click .btn' : 'Отак кнопка дозволяє фільтрувати результати пошуку'
} 
];
enjoyhint_instance.set(enjoyhint_script_steps);
enjoyhint_instance.run();

Результат показаний нижче:

first hint

Ось як це працює. `click` — це подія, яка запустить наступну підказку. В даному випадку — натискання кнопки. Вибрати елемент сторінки, який буде виділений і для якого з'явиться підказка можна з допомогою селектора. У нашому випадку цим елементом є кнопка «Фільтр» зі значенням атрибуту `class=btn`. Далі, після двокрапки, йде текст підказки.

Оскільки ми створюємо єдину підказку, після того, як ми натиснемо на кнопку «Фільтр» або на кнопку «Skip», вона зникне. Кнопка «Skip» з'являється за замовчуванням. Але, оскільки все наше керівництво складається з одного-єдиного кроку, вона виглядає трохи недоречно. В даному прикладі просто нічого пропускати. EnjoyHint дозволяє додавати власні CSS-класи і назви до своїх елементах, що буде корисно, якщо ви хочете додати опис до єдиного елементу вашої сторінки.

Ви можете змінити напис на кнопці властивості `skipButton`:

'click .btn' : /*текст підказки*/,
'skipButton' : {className: "mySkip", text: "Зрозумів!"}

Цей код також додасть до неї CSS-клас `mySkip`. Використовуючи, наприклад, такий CSS-код:

.mySkip {
color: white;
border-color: white;
}

Можна змінити колір кнопки:

change skip button

Якщо ж кнопка «Skip» здасться вам зайвою, її можна взагалі прибрати за допомогою властивості `showSkip: false`.

Отже, ми знаємо, як створити окрему підказку. Тепер можна створити послідовність підказок, які будуть запускатися один за одним. Таким чином, у нас вийде інтерактивне керівництво.

Послідовність підказок
Щоб написати наше керівництво по сайту, ми створимо опис підказок з чистого аркуша.
Перша підказка. Подія 'next'
Для того, щоб створити перша подія, використовуємо наступний код:

'next .navbar-brand' : /*текст підказки*/

В цей раз було використано подія `next` і ось що ми отримали в результаті:

first hint next

Як бачите, заголовок сайту тепер виділений. На цей раз у нас дві кнопки: «Next», яка запустить наступну підказку і «Skip», яка перерве роботу скрипта. Змінити кнопку «Next» можна майже таким же способом, що і кнопку «Skip» з попереднього прикладу:

'nextButton' : {className: "myNext", text: "Звичайно!"},
'skipButton' : {className: "mySkip", text: "-"}

Ось що ви отримаєте в якості результату:

next button redefined

Будемо сподіватися, що відвідувачі сайту вирішать переглянути керівництво цілком. А значить, потрібно створити наступну підказку.

Друга підказка. Подія 'key'
Цей крок керівництва розповість користувачеві, як використовувати рядок пошуку. Для цього ми використовуємо подія `key`. Воно запустить наступну підказку після натискання певної клавіші:

'key #mySearchButton' : /*текст підказки*/,
'keyCode' : 13

Зверніть увагу, що в цьому випадку в якості селектора було використано значення атрибуту `<id=mySearchButton>`. Властивість `keyCode` визначає код клавіш, натискання якої запустить наступну підказку. В даному випадку це код клавіші Enter.

Давайте подивимося на результат:

result

Після натискання клавіші, з'явиться наступна підказка.
Третя і четверта підказки. Змінюємо форму
В якості третього кроку ми використовуємо вже знайомий нам приклад для кнопки «Фільтр»:

'click .btn' : /*текст підказки*/

Після натискання кнопки буде викликана четверта підказка. І на цей раз ми змінимо форму виділеної області на коло. Для цього використовуємо властивість `shape`:

'next .about' : /*текст підказки*/,
'shape': 'circle'

В результаті посилання «Про сайт» буде виділена як показано на скріншоті:

image

Останній крок. Міняємо розмір
EnjoyHint чудово справляється з підсвічуванням елементів різного розміру. Але якщо розмір виділеної області за замовчуванням вас не влаштовує, його можна змінити за допомогою властивості `radius`. Зараз ми створимо останню підказку з використанням цієї можливості. Оскільки це останній крок нашого керівництва, кнопка Skip нам більше не знадобиться. Можна прибрати її з допомогою властивості `showSkip: false`.

Отже, код для останньої підказки:

'next .contact' : 'Чекаємо ваших відгуків і пропозицій :)',
'shape': 'circle',
'radius': 80,
'showSkip' : false,
'nextButton' : {className: "myNext", text: "Закрити"}

Результат:final step

Коллбеки
Останнє на сьогодні. Коллбеки. Для їх виклику можна використовувати події скрипта `onStart` і `onEnd`. Подія `onStart` запускається на самому початку роботи, перед першою підказкою. Подія `onEnd` запускається після останньої підказки. Наприклад:

var enjoyhint_instance = new EnjoyHint({
onStart:function(){
// викликається перед першою підказкою
},
onEnd:function(){
// викликається після останньої підказки
}
});

Доступно також подія для окремої підказки `onBeforeStart`. Воно запускається перед появою підказки на екрані:

var enjoyhint_script_steps = [
{
/* опис підказки */
onBeforeStart:function(){
// викликається перед підказкою
}
}
];


Висновок
З допомогою EnjoyHint можна швидко додати на сайт поодинокі підказки або покроковий гайд по основним елементам. Для того, щоб додати підказку, потрібно просто прив'язати її до потрібного селектору, а для опису самої підказки можна використовувати HTML-теги. Скачати EnjoyHint, а також почитати інструкцію, що містить опис доступних фіч можна тут.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.