Bootstrap Tour. Делаем красивый тур на сайте
Bootstrap Tour - Это плагин, который при загрузке страницы выделяет определенные элементы вашего сайта, тем самым заставляет обратить внимание на выделенный элемент в первую очередь.Данный плагин отлично подходит для страницы регистрации либо публикации новостей.
Рассмотрим пример установки и эксплуатации на простой bootstrap странице.
(Так же можно установить и на DLE шаблон)
1. Первым делом нам нужно скачать и подготовить bootstrap страничку. Качаем boostrap и создаем файл index.html.
Я набросал простую страницу с несколькими панельками, на которые я буду привязывать тот самый Тур.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Первая панель</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Вторая панель</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Третья панель</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2. Теперь нам необходимо подключить плагин bootstrap-tour.
Для этого кидаем файлы по папкам и в index.html перед </head> добавляем:
<link href="css/bootstrap-tour.css" rel="stylesheet">
Перед </body><script src="js/bootstrap-tour.js"></script>
3. Инициализируем плагин, перед </body>вставляем:
<script>
var tour = new Tour({
steps: [
{
element: "#1panel",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#2panel",
title: "Title of my step",
content: "Content of my step"
}
]});
tour.init();
tour.start();
</script>
Остается добавить идентификатор к панелям.
В нашем index.html ищем div панелей и добавляем id прописанный в коде инициализации, должно получиться так:
<div class="panel panel-default" id="1panel">
Вот и всё, теперь после загрузки страницы, у панели будут свои всплывающие окна с информацией.Вот так всё это дело выглядит.
У этого плагина куча настроек, на официальном сайте вы можете найти их все и настроить под себя.
К Dle шаблону подключается все точно так же. Прописываем все в файл main.tpl.
Забыл сказать. Если у вас не подключен Bootstrap, то используйте файлы bootstrap-tour-standalone!
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените сайт