Вы знаете эту систему гидов. Очень часто крупные ресурсы вроде Facebook используют их, чтобы указать на новшества и нововведения в интерфейс сервиса. Если вы вносите какие-либо незначительные изменения на сайт, но вам хочется рассказать об этом пользователям – не нужно создавать отдельную новость, можно просто воспользоваться подсказками.
Гиды на Intro.js
Intro.js предлагает вам фреймворк, который позволяет реализовать небольшие гиды по нововведениям в виде подсказок на сайте. Все что вам нужно сделать для начала работы, это встроить javascript-код и сопутствующие каскадные таблицы стилей в ваш проект. Затем вам нужно обозначить HTML-элемент, который вы хотите включить в гид, при помощи следующих атрибутов данных:
<div data-intro="This is essential information" data-step="2"></div>
Атрибут data-intro определяет фрагмент кода, который будет отображен внутри подсказки. data-step определяет, на каком этапе гида будет отображена подсказка. Ссылки на переход к следующему или предыдущему этапу добавляются автоматически. Таким образом, пользователь имеет возможность быстро прощелкать весь гид.
Как только гид будет запущен, весь сайт будет затемнен, и нормальными останутся только те HTML-элементы, о которых рассказывается в этапе гида.
Атрибут data-position используется для расположения подсказок рядом с HTML-элементом.
После того, как вы определите все необходимые этапы, вы можете запустить гид при помощи следующего запроса:
introJs().start();
IntroJs() может быть запущен при помощи кнопки, либо, что более удобно (как, например, это происходит в Facebook), при полной загрузке страницы.
Стандартный шаблон подсказок довольно опрятен и вряд ли будет сильно выделяться в рамках какого-либо дизайна. Если вам захочется отредактировать внешний вид подсказок, вы можете сделать это. Просто измените CSS-код.
В завершение
Intro.js предлагает невероятно простой и быстрый способ добавить коротенькие гиды по нововведениям на сайте. Если вам нужно будет быстро реализовать подобный интерфейс, не стесняйтесь воспользоваться Intro.js. Если вам нужно что-то более серьезное или строгое, вы всегда можете изменить CSS-код по вашим требованиям. Intro.js работает со всеми современными версиями Firefox, Chrome и Internet Explorer. Так как здесь используется HTML5 и CSS3, вы вероятно уже догадались, что вряд ли стоит ожидать поддержки в старых версиях браузеров.
Ссылки
* Intro.js: javascript-фреймворк для знакомства пользователей с вашим сайтом
Постовой: Kino-Max.com - рай для киноманов! Фильмы онлайн - в хорошем качестве HD 720p, на нашем портале в любое время - это гораздо удобнее и проще!