Создание подсказок с EnjoyHint

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

EnjoyHint зависит от jQuery и требует версию библиотеки, большую или равную версии 1.7. Другая зависимость — это KineticJS v5.1.0, которая уже включена в EnjoyHint, так что беспокоиться не о чем.

Если вы хотите проверить исходный код демо, вы можете посетить этот репозиторий GitHub .

Зачем использовать EnjoyHint?

Основная цель EnjoyHint — дать вам возможность помочь пользователю разобраться в возможностях ваших веб-страниц. Это может быть очень полезно в случае большого веб-приложения с тоннами элементов.

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

• Бесплатно использовать
• Автоматическая фокусировка и выделение области, связанной с подсказкой
• Различные формы выделенной области
• Свойство задержки подсказки
• Возможность возобновить прерванную последовательность подсказок
• Кросс-браузерная поддержка
• Поддержка сенсорных экранов Android, iOS и Windows

Имея это в виду, пришло время написать код, чтобы увидеть эту библиотеку в действии.

Создание подсказки

Я создал эту крошечную модель поисковой системы в качестве примера:

Он содержит заголовок, поле поиска и кнопку «Параметры», которая помогает переключаться между различными типами результатов поиска. Разработка веб-сайта очень проста, и она также выходит за рамки данного руководства, поэтому я не буду описывать детали. Тем не менее, вы можете проверить исходный код, если хотите.

Как только у нас будет базовая веб-страница, мы можем начать использовать EnjoyHint. Первый шаг, который нужно выполнить, это установить его с помощью Bower :

bower install enjoyhint 

Кроме того, вы можете скачать его из репозитория GitHub .

После загрузки и извлечения пакета вы можете включить его в свой HTML-файл. Как мы уже говорили, эта библиотека зависит от jQuery, поэтому вы должны включить последнюю перед EnjoyHint. Если вы не хотите размещать jQuery локально, вы можете использовать jQuery CDN , как показано ниже:

 <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"/> 

EnjoyHint Initialization

Для инициализации нового экземпляра EnjoyHint вы можете написать:

 var enjoyhint_instance = new EnjoyHint({}); 

 var enjoyhint_script_steps = [{ /*hint code goes here*/ }]; 

 var enjoyhint_script_steps = [{ /*first hint code*/ }, { /*second hint code*/ }]; 

 enjoyhint_instance.set(enjoyhint_script_steps); 

 enjoyhint_instance.run(); 

 'click .btn' : 'This button allows you to switch between the search results' 

 'click .btn' : /*hint text*/, 'skipButton' : {className: "mySkip", text: "Got It!"} 

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

 'next .navbar-brand' : /*hint text*/ 

 'nextButton' : {className: "myNext", text: "Sure"}, 'skipButton' : {className: "mySkip", text: "Nope!"} 

 'key #mySearch' : /*hint text*/, 'keyCode' : 13 

 'click .btn' : /*hint definition*/ 

 'next .about' : /*hint definition*/, 'shape': 'circle' 

 'next .contact' : 'Your feedback will be appreciated', 'shape': 'circle', 'radius': 70, 'showSkip' : false, 'nextButton' : {className: "myNext", text: "Got it!"} 

 var enjoyhint_instance = new EnjoyHint({ onStart: function () { // runs before the first hint }, onEnd: function () { // runs after the last hint } }); 

 var enjoyhint_script_steps = [{ /* hint description */ onBeforeStart: function () { // runs before the hint } }];