Начальный тур не инициализируется
На моем сайте я использую код, очень похожий на код на официальном сайте boostraptour.com, но я даже не получаю всплывающее окно с первым туром. Я установил область тестирования в JSFiddle, но мне все еще не удается. Я что-то пропустил?
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-tour.min.css" rel="stylesheet">
<style>
.jumbotron {
margin-bottom: 0px;
background-image: url(../assets/images/caterhamimage.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-color: #000000;
text-shadow: black 0.3em 0.3em 0.3em;
}
</style>
<script>
var tour = new Tour();
tour.addSteps: ([
{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
},
{
element: "#tour2",
title: "Daily Brief",
content: "This widget is updated every day and gives you a glimpse at what is going on in and around school. This could include matches, interest talks or special days specific to a particular year group."
},
{
element: "#accordion",
title: "Quick Views",
content: "This collection of collapsible widgets allows you to take a quick look at vital information right from your dashboard. You can see your lessons for today or any important reminders that you or a teacher may have set."
},
{
element: "#lunchmenu",
title: "Lunch Menu",
content: "This widget shows you what is for lunch so that you can plan what you want before you even get there. Updated daily, it is one of the best ways to get information about school food!"
},
{
element: "#navbar",
title: "The Navigation Bar",
content: "Whilst there is a lot of information directly on your dashboard, you can take a look at it on these!"
}]);
// Initialize the tour
tour.init();
$('#tour-go').click(function () {
// Start the tour
tour.start();
});
});
</script>
</head>
<body>
<?php include 'header.php'; ?>
<div class="jumbotron">
<h1>Welcome to Your Dashboard, <?php echo "$studentName"; ?>!</h1>
<p>You have <?php echo "$numberOfHomeworksOutstanding"; ?> homeworks!</p>
<p><a class="btn btn-primary btn-lg" role="button" id="tour-go">Take a look!</a></p>
</div>
<br clear='all'>
<div class="row">
<div class="col-md-4">
<div class="list-group" id="tour1">
<a href="homework.php" class="list-group-item list-group-item-warning">
<h4 class="list-group-item-heading">Maths Circle Theorems - 08/06/12 p.4</h4>
<span class="badge">14 hrs left</span>
<p class="list-group-item-text">Page 34, Exercise 3</p>
</a>
<a href="homework.php" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<span class="badge">14</span>
<p class="list-group-item-text">...</p>
</a>
<a href="homework.php" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<span class="badge">14</span>
<p class="list-group-item-text">...</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" id="tour2">
<div class="panel-heading"><strong>Daily Update - <?php echo date("l j") ?><sup><?php echo date("S") ?></sup><?php echo date(" \of F Y"); ?></strong></div>
<div class="panel-body">
Panel content
</div>
</div>
<br clear="all" />
<br clear="all" />
<div class="panel panel-default" id="lunchmenu">
<div class="panel-heading"><strong>Today's Lunch Menu</strong></div>
<div class="panel-body">
<p>Pea and Watercress Soup with Fresh Bread<br />
Cumberland Rings with Onion Gravy and Mashed potato with Broccoli and Carrots<br />
Chinese Chicken Stir Fry with Sweet & Sour Noodles<br />
Chilli sauce dip<br />
Prawn crackers<br />
Sweet potato and Spring Onion Frittata (VEGETARIAN)<br />
Pasta with Chicken & Leak or Neapolitan Sauce<br />
Lemon Drizzle Cake</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Quick Timetable
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Quick Reminders
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/tour.js"></script>
<script src="../js/bootstrap-tour.min.js"></script>
1 ответ
Удалить : после addSteps:
var tour = new Tour();
tour.addSteps([{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
}, {
//...
Вы также можете инициализировать шаги, такие как:
var tour = new Tour({
steps:[{
element: "#tour1",
title: "Quick Homework",
content: "This widget allows you to see your homeworks with the closest deadline at a glance. Any homeworks in yellow have less than a day to be completed and a homework in red means that it has expired."
}]
});
PS также убедитесь, что вы инициализируете tour после загрузки исходного файла JavaScript.