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

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

12012-07-0828854Денис Абдуллин
Новый плагин – это простой тур по сайту, а если конкретнее, то по одной странице сайта. Подсказки появляются в нужном углу экрана, а возле нужны элементов появляются тултипы. Плагин использует 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;
}

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Майрбек Абдурахманов 2014-01-08 в 16:22 / МатериалСпам
У меня чет не работает. Устанавливаю для профиля а нечего не появляется. Может я не правильно понял суть работы скрипта? Когда он появляться должен?
0
Гладнев Ярослав 2012-07-08 в 21:09 / МатериалСпам
Простенько и классно!
0
Гость 2012-07-08 в 20:16 / МатериалСпам
Супер)
А что используется на pingver.ru ?
0
Денис Абдуллин 2012-07-08 в 20:18 / МатериалСпам
На главной странице просто последовательное выполнение скриптов
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.