Экскурсия по сайту на JQuery

Экскурсия по сайту на JQuery

08.07.201221014

Новый плагин – это простой тур по сайту, а если конкретнее, то по одной странице сайта. Подсказки появляются в нужном углу экрана, а возле нужны элементов появляются тултипы. Плагин использует JSON, поэтому его работа такая простая. Вы легко можете настроить угол экрана для блока экскурсии и легко можете установить положение для тултипов. В примере кода все интуитивно понятно. В дополнение идет плагин скроллинга на JQuery, который позволяет прокручивать страницу к нужному элементу.

Подключение JQuery и плагина экскурсии по сайту (в секцию HEAD)

Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="jquery.scrollTo.js" type="text/javascript"></script>
  <script src="jquery.aSimpleTour.js" type="text/javascript"></script>


Вызов экскурсии

Code
<script type="text/javascript">
$(document).ready(function(){
options = {
  data : [
  { element: '.top', 'tooltip' : 'Автор и название ', 'position' : 'L', 'controlsPosition' : 'TR' },
  { element: '.content', 'tooltip' : 'Текст произведения', 'position' : 'L', 'controlsPosition' : 'TR' },
  { element: '.bottom', 'tooltip' : 'Полное название источника', text: 'Другой текст для блока', 'position' : 'T', 'controlsPosition' : 'TR' }
  ],
  controlsPosition : 'TR'
}

$.aSimpleTour(options);

});
</script>


element - элемент, к которому нужно отобразить тултип (обязательно)
tooltip - текст тултипа (обязательно)
position - это положение тултипа, относительно элемента
controlsPosition - положение блока тура

Код CSS

Code
#tourText {font-size:14px;}
#tourText {margin-top:10px}
#tourText h2 {margin:0;padding:0;font-size:16px;margin-bottom:10px}
#tourText p {margin:0;padding:0}

#tourButtons {margin-top:20px}
#tourButtons button {
  margin:0;
  margin-right:5px;
  padding:5px 10px;
  color:#FFFFFF;
  background:#4892EC;
  border:0px;
  border-radius:3px;
  cursor:pointer
}

#tourEnd, #tourEnd:hover {
  margin:0;
  margin-right:5px;
  padding:5px 10px;
  color:#FFFFFF;
  text-decoration: none;
  background:#4892EC;
  border-radius:3px;
}



Сохраните в социальную сеть
Комментарии (4)
Гость 08.07.2012 в 20:16Спам
Супер)
А что используется на pingver.ru ?
0
На главной странице просто последовательное выполнение скриптов
0
Простенько и классно!
0
У меня чет не работает. Устанавливаю для профиля а нечего не появляется. Может я не правильно понял суть работы скрипта? Когда он появляться должен?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт