Делаем экскурсию по сайту

25 марта 2011 года, Размещено в категории: jQuery / MooTools

Делам экскурсию по сайте

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

демо эффект затухания иконок на JQueryскачать эффект затухания иконок на 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 и вставляем его себе на сайт, например, вниз файла на котором будет экскурсия.

Ну вот и весь урок, если Вам что-то непонятно, или что-то не получается тогда пишите в комментарии - разберемся.






2 комментария

  • 7 лет назад Ответить

    Твое мнение:вроде бы всё просто. Но, мне кажется, странички будут больше грузиться, ведь используется дополнительный ява код. А это не очень хорошо, если у пользователя интернет дохловатый.

    • 7 лет назад Ответить

      Да вы правы, будут не много дольше грузится, но как говорится — Красота, требует жертв.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: