Как сделать экскурсию по сайту на JQuery.
Привет всем читателям! Сегодня я продолжаю вас радовать всякими вкусностями для библиотеки JQuery. Хотя бы, я надеюсь на это) На этот раз я хочу показать вам, как сделать тур по своему сайту с помощью небольшого плагина. Что же, давайте приступим?
Для начала перейдите по ссылке: http://tinytools.codesells.com/TourTip Найдите кнопку download и скачайте необходимые компоненты. Теперь создадим html файл и подключим нужные скрипты и стили
<head>
<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="tinytools.tourtip.min.js"></script>
</head>
Все, теперь вы можете устраивать тур по любому элементу на странице. Давайте, к примеру, создадим div с id=block
<div id="block">Какой-то текст. Неважно какой. Тут может быть все, что угодно</div>
А теперь напишем необходимый скрипт
<script>
$(document).ready(function () {
$("#block").tourTip({
title: "Заголовок",
description: "Какое-то описание нашего элемента",
previous: true,
position: 'bottom'
});
$.tourTip.start();
});
</script>
Отбираем наш элемент, задаем параметры: заголовок, описание, показывать или нет кнопку previous и позицию, т.е. где будет наш блок с описанием элемента. В нашем примере он будет снизу, но вы можете задать любое другое значение: left, top, right. Таким образом можно задавать блоки с описанием для абсолютно любого элемента на странице. После того, как у вас все готово, нужно запустить скрипт. Для этого просто вызовите метод start(), как показано в коде выше.
Вот и все. Таким образом вы можете сделать небольшую экскурсию по сайту. Думаю, вы уже придумали, где могли бы это использовать. Конечно, параметров вы можете передавать намного больше и посмотреть их все вы также можете на сайте, данном в начале статьи.
Надеюсь, данная плюшка пришлась вам по душе, а на этом у меня все. Спасибо за внимание!
-
Создано 27.05.2014 20:59:33
-
Михаил Русаков
Комментарии (1):
Прикольная штучка! Спасибо, Михаил.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.