Мои друзья! Время от времени каждый из нас сталкивается с ситуацией, когда, оказавшись на новом сайте, нам приходится минуту-другую хорошенько подумать, чтобы понять, как там все устроено.
Примерно в таком же положении вы можете оказаться, если обнаружите радикальные (или не очень радикальные) изменения во внешнем виде ваших любимых сайтов, будь то Last.fm или Кинопоиск.
Есть разные способы примирить пользователей с новым дизайном: от постепенного внедрения новых функций («Попробуйте бета-версию обновленного сайта прямо сейчас!») до создания пошагового руководства по новым функциям.
О последнем варианте мы сегодня и поговорим.
Цель этой статьи — рассказать о процессе создания интерактивных подсказок для сайта с помощью НаслаждайтесьПодсказка .
Сначала мы создадим всплывающую подсказку для одного элемента.
Далее давайте посмотрим, как мы можем создать последовательность подсказок, которые будут запускаться одно за другим.
Это обеспечит интерактивное руководство по основным функциям нашего сайта.
В качестве примера мы использовали небольшой шаблон поисковой системы, написанный с использованием Бутстрап .
Одна из зависимостей – jQuery версия 1.7 или выше.
Другая его зависимость КинетикJS версии 5.10, но поскольку эта библиотека уже включена в EnjoyHint, беспокоиться о ней лишний раз не придется.
Для тех, кому не терпится увидеть, как будет выглядеть окончательное руководство, посмотрите это демо .
Наслаждайтесь подсказкой.
Немного теории С помощью EnjoyHint вы можете создать последовательность интерактивных подсказок, которые проведут пользователя по множеству элементов вашего сайта, сообщая им, какие из них что делают. Это может быть полезно в случае сложного веб-приложения с большим количеством элементов.
Можно выделить, например, отдельную кнопку и рассказать, для чего она нужна.
Вы также можете взять посетителя сайта за руку и провести его по всему сайту, попутно объясняя, что и почему следует использовать.
При этом вы можете применять свои собственные стили к текстам всплывающих подсказок и изменять форму и границы выделенной области.
Основные особенности:
- Автоматическая фокусировка и подсветка выбранной области
- Изменение формы и границ выделенной области
- Возможность задержки появления всплывающей подсказки.
- Возможность продолжить прерванную последовательность подсказок
- Кроссбраузерная поддержка (Chrome, FireFox, IE10+, Safari)
- Поддерживает устройства с сенсорным экраном под управлением Android, iOS и Windows.
Создание всплывающей подсказки
В качестве примера я сделал вот такую небольшую модель поисковой системы:
Итак, давайте начнем.
Для начала подготовим необходимые файлы.
Вы можете установить EnjoyHint с помощью менеджера пакетов.
Бауэр :
Или скачайте отсюда Страницы GitHub .bower install enjoyhint
В качестве примера мы используем второй вариант.
Добавьте 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 = [
Теги: #enjoyhint #CSS #JavaScript #веб-разработка #разработка #html5 #разработка веб-сайтов #с открытым исходным кодом #CSS #JavaScript
-
Сброс Пароля Mac: Что Вам Нужно Знать
19 Oct, 24 -
3D Макс. Основы. Как И С Чего Начать?
19 Oct, 24 -
Мфкаст №40. Неделя Флагманов Android
19 Oct, 24 -
Начало Научной Карьеры (Часть 3)
19 Oct, 24 -
О Новых Успехах Противостояния (Ср Увч!*)
19 Oct, 24 -
Удобство Использования Microsoft Word 2007.
19 Oct, 24
