Делаем экскурсию по сайту
25 марта 2011 года, Размещено в категории: jQuery / MooTools
Сейчас мы будем с Вами создавать экскурсию по сайту, с помощью фреймворка JQuery. Экскурсии я делаю для того, чтобы пользователю разъяснить какие-то функции сайта, или показать, как нужно добавлять товар в корзину, если это интернет магазин.
Вот еще один пример - если у Вас есть какое-то веб-приложение, тогда нужно объяснить, как работать с интерфейсом этого приложения.
На демо Вы можете оценить экскурсию, которою я сделал для одной веб-станицы:
Если смотрели демо, то Вы видели, что в правом верхнем углу есть небольшая навигация, с помощью которой можно управлять экскурсией по сайте. Навигация позволяет пользователю вернуться назад, вперед или перезапустить экскурсию по сайте.
Вся экскурсия складывается из небольших сообщений, чтобы добавить такое сообщение, нужно просто в нужный нам элемент добавить класс "tour_1", "tour_2" и так далее. Например Вы хотите добавить подсказку с какому то заголовку:
<div> <h2 class="tour_1">Мини галерея на JQuery</h2> Рассмотрим галерею на JQuery плагине clickCarousel, ...</div> |
Теперь давайте настроим расположение и цвет сообщения, мы можем внести вот такие параметры:
name: - класс который мы используем для подкрепления наших сообщений
bgcolor: - цвет фона подсказки (как определить html код цвета)
color: - цвет текста подсказки
text: - текст подсказки
time: - время в миллисекундах, между сообщениями, это если включена авто-экскурсия
position: - положения подсказки
Вот так должно выглядеть, когда заполнены все параметры подсказки:
var config = [ { "name" : "tour_1", "bgcolor" : "black", "color" : "white", "position" : "TL", "text" : "текст подсказки", "time" : 5000 },... ] |
Для положения подсказке используйте вот эти значения:
TL: левом верхнем углу
TR: в правом верхнем углу
BL: нижний левый
БР: правом нижнем углу
LT: левом верхнем
LB: левом нижнем
RT: правом верхнем
РБ: правом нижнем
Т: верхняя
R: правый
B: нижнее
L: левый
Идем далее, чтобы изменить оформление навигации, вам нужно будет отредактировать файл jquerytour.css он находится в папке «css».
Чтобы подключить экскурсию к своему сайту, первое, что нужно сделать так это подключить фреймворк JQuery и JQuery плагин экскурсии, код вставляем между тегами <head>:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"><!--mce:0--></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"><!--mce:1--></script> |
Затем копируем код javascript’а, что находится в файле index.html и вставляем его себе на сайт, например, вниз файла на котором будет экскурсия.
Ну вот и весь урок, если Вам что-то непонятно, или что-то не получается тогда пишите в комментарии - разберемся.
8 лет назад
Твое мнение:вроде бы всё просто. Но, мне кажется, странички будут больше грузиться, ведь используется дополнительный ява код. А это не очень хорошо, если у пользователя интернет дохловатый.
8 лет назад
Да вы правы, будут не много дольше грузится, но как говорится — Красота, требует жертв.