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!