[英]Bootstrap Tour - How do I return back from destination page?
我正在玩Bootstrap Tour，我發現自己陷入了導航頁面。
在我的導覽中，第四步將用戶從index.cshtml帶到page.cshtml，它工作正常，但是傳統框沒有在page.cshtml中打開，所以我無法從目標頁面導航回來。
在bootstraptour.com的Bootstrap游覽演示中，我無法識別javascript以在page.cshtml中打開游覽彈出窗口或處理返回index.cshtml。 只有一個帶有一個名為container的類的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>
我看到了幾個問題：
在page.cshtml的標記中page.cshtml為page.cshtml步（ #step-four ）指定的元素
第五步沒有定義element ，我相信除非你將orphan選項設置為true否則需要一個element
您必須在page.cshtml包含所有游覽代碼，如果您在page.html檢查演示的來源，則最后引用的腳本index.js包含游覽實例。
最后，我不確定這是否有任何區別，但我認為你對tour.restart();調用tour.restart(); 和tour.start(true); 應該交換位置
再看看如何在巡視中導航頁面我回到了昨天的位置：巡視從index.cshtml變為page.cshtml並返回，但只需點擊一下 - page.cshtml只是閃爍打開。 巡視步驟彈出窗口不會在page.cshtml中打開，我們不會留在該頁面上。
所以，我想我會在page.cshtml（第五步和第六步）和BINGO中添加另一個步驟！
感謝kuala_dev指針。 工作代碼如下：
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-seven"> step 7</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",
title: "Step One Title",
content: "Step One Content"
},
{
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"
},
{
element: "#step-five",
title: "Step five Title",
content: "Step five Content"
},
{
path: "/index.cshtml",
element: "#step-six",
title: "Step six Title",
content: "Step six Content"
},
{
element: "#step-seven",
title: "Step seven Title",
content: "Step seven 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>
<hr>
<h2 class="step-handle" id="step-five" style="float: left">We're Big Show Offs</h2>
<hr>
<h2 class="step-handle" id="step-six" style="float: left">We're Big Show Offs</h2>
</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",
title: "Step One Title",
content: "Step One Content"
},
{
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"
},
{
element: "#step-five",
title: "Step five Title",
content: "Step five Content"
},
{
path: "/index.cshtml",
element: "#step-six",
title: "Step six Title",
content: "Step six Content"
},
{
element: "#step-seven",
title: "Step seven Title",
content: "Step seven Content"
}
]);
tour.restart();
$("#pause-tour").on("click", function() {
tour.end();
});
$("#resume-tour").on("click", function() {
tour.start(true);
});
</script>
我在網站上使用了Bootstrap導覽。 導覽第一次工作，然后停止工作。 我該如何解決此錯誤？
[英]I used Bootstrap tour on my site. The tour works for the first time and then, it stops working. How do i resolve this error?
填寫聯系表后，如何將用戶返回到他們來自的頁面？
[英]How do I return a user back to the page they came from after filling out a contact form?
如何使用Bootstrap-Tour和動態路徑處理多頁游覽？
[英]How to handle multi page tours with Bootstrap-Tour and dynamic paths?
在 protractor 中，如何將 function 中的值返回到“it block”
[英]In protractor, how do I return a value from a function back to the “it block”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.