Bootstrap Tour で遊んでいるのですが、ページの移動がうまくいかないことに気づきました。
私のツアーでは、手順 4 でユーザーが index.cshtml から page.cshtml に移動しますが、これは正常に機能しますが、ツアー ボックスが page.cshtml で開かないため、目的のページから戻ることができません。
bootstraptour.com の Bootstrap ツアー デモでは、page.cshtml でツアー ポップアップを開いたり、index.cshtml に戻る処理を行うための JavaScript を特定できません。Bootstraptour デモ page.html には、container と呼ばれるクラスと依存リンクを含む div のみがあります。
私はさまざまなオプションを試しましたが、喜びはありませんでした。では、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>