Я играю с Bootstrap Tour, и я обнаружил, что застрял в навигации по страницам.Bootstrap Tour - Как вернуться с целевой страницы?
В моем туре шаг 4 принимает пользователей от index.cshtml к page.cshtml, который отлично работает, однако окно тура не открывается в page.cshtml, поэтому я не могу перейти с целевой страницы.
В демоверсии тура Bootstrap на bootstraptour.com Я не могу определить javascript, чтобы открыть всплывающее окно тура в page.cshtml или обработать возврат обратно к index.cshtml. Существует только div с классом, называемым контейнером, и ссылками на ссылку в демо-странице Bootstraptour page.html.
Я пробовал разные варианты без радости. Итак, может ли кто-нибудь помочь мне открыть всплывающее окно в page.cshtml и использовать его для перехода к исходному index.cshtml? Благодарю.
Вот что у меня есть:
index.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap Tour -->
<link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">
</head>
<body>
</br>
</br>
<p class="step-handle" id="step-welcome"> step welcome </p></br>
<p class="step-handle" id="step-one"> step 1</p></br>
<p class="step-handle" id="step-two"> step 2 </p></br>
<p class="step-handle" id="step-three"> step 3 </p></br>
<p class="step-handle" id="step-four"> step 4</p></br>
<p class="step-handle" id="step-five"> step 5 </p></br> <!-- DOES STEP FIVE GO IN page.cshtml? -->
<p class="step-handle" id="step-six"> step 6</p></br>
<hr />
<button id="pause-tour">Pause Tour</button>
<hr />
<button id="resume-tour">Resume Tour</button>
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap-tour/jquery.js"></script>
<script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
<script src="../bootstrap-tour/bootstrap-popover.js"></script>
<script src="../bootstrap-tour/bootstrap-tour.js"></script>
<script type="text/javascript">
var tour = new Tour({
afterSetState: function(key, value) {
console.log(key, value, tour.getState(), tour.getStep());
}
});
tour.addSteps([
{
element: "#welcome",
title: "WELCOME",
content: "Welcome to the bootstrap tour"
},
{
element: "#step-one", // string (jQuery selector) - html element next to which the step popover should be shown
title: "Step One Title", // string - title of the popover
content: "Step One Content" // string - content of the popover
},
{
element: "#step-two",
title: "Step Two Title",
content: "Step Two Content"
},
{
element: "#step-three",
title: "Step Three Title",
content: "Step Three Content"
},
{
path: "/page.cshtml",
element: "#step-four",
title: "Step four Title",
content: "Step four Content"
},
{
path: "/",
title: "Step five Title",
content: "Step five Content"
},
{
element: "#step-six",
title: "Step six Title",
content: "Step six Content"
}
]);
tour.restart();
$("#pause-tour").on("click", function() {
tour.end();
});
$("#resume-tour").on("click", function() {
tour.start(true);
});
</script>
page.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap Tour -->
<link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>This is just a test.</h1>
<p>Nothing to see here. Move on!</p>
</div>
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap-tour/jquery.js"></script>
<script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
<script src="../bootstrap-tour/bootstrap-popover.js"></script>
<script src="../bootstrap-tour/bootstrap-tour.js"></script>
Hi koala_dev, спасибо за помощь. У моих попыток page.cshtml было # шага-четыре, и определился элемент пятого шага (который, должно быть, упал с вырезания и вставки в этот пост). Поскольку я не мог включить все различные варианты page.cshtml, которые я пробовал, я оставил шаблон page.cshtml, чтобы увидеть, добавит ли кто-нибудь ответный шаг, чтобы показать мне, как вернуться к index.cshtml. Сначала у меня был код на обеих страницах, и js почти работал, перелистывая страницы. Я «пропустил» упоминаемые js в демо, хотя это меня бросило, поэтому «спасибо» за это. Во всяком случае, я добрался туда (см. Выше) Спасибо – DaniB
У меня такая же проблема, как у Danib лицом ,,, если вы мне поможете @koala_dev –