Bootstrap 游览，如何强制停止自动启动？

Question

我真的需要帮助关闭我正在构建的网页的 Bootstrap Tour 插件的 "auto start" 功能。这次旅行本身很棒。它按预期从一步跳到另一步。但是，当用户第一次查看该页面时，游览将自行开始。用户可以按 "end tour"，游览将不再自动开始。但是，我想一起阻止自动启动。

我需要你的帮助来找到一种方法（或一种设置）来防止导览自行开始。我不希望用户必须按 "end tour"...他们应该只在他们想要游览开始时按 "Start Tour"！

见下面的代码。请注意，我省略了页面的大部分代码，因为我不想让您不知所措。

请帮忙，如何停止自动开始导览？

<!-- Bootrap CSS  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Tour CSS  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">


<a id="MSL-initialize-tour">
    START TOUR <span class="glyphicon glyphicon-play"></span>
</a>

<!-------- JQuery JS -------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-------- Bootsrap JS -------->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-------- Bootsrap Tour JS -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>

<!-------- Bootsrap Tour Steps -------->
<script>
// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-initialize-tour",
    placement: "bottom",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features."
  }
]});

tour.init();
tour.start();

$('#MSL-initialize-tour').click(function(){
 tour.restart();
});
</script>

Answer 1

不确定我是否理解你的问题，但我认为你应该删除：

tour.start();

Answer 2

你需要搬家

tour.init();
tour.start();

函数内部。现在，一旦 Javascript 被加载，它们就会被调用。

Here is a JSFiddle example

您可以看到 init、start 和 restart 如何都在用户单击 "Start Tour" 按钮时调用的同一个函数中。

Answer 3

我在使用 bootstrap-tour 时遇到的一个常见问题是，当 end-user 结束巡演时，如果我对巡演进行了更改，则无法对其进行版本化，因此他们会看到它再次但如果他们已经看过该版本，请将其隐藏。我能够通过在 tour.init() 和 tour.start() 之间添加下面的代码来解决这个问题。通过更新 "tourpageversion"，它有效地添加了版本控制并强制重新启动，以便 end-user 可以再次看到巡回演出。参数 "tourversion_layout" 对于游览或在我的情况下是游览所在的页面是唯一的。

// Instance the tour
var tour = new Tour({
steps: [ ... ]
});

// Initialize the tour
tour.init();

//check page tour version
var tourpageversion = "2018-03-30";
if (localStorage.getItem("tourversion_layout") !== tourpageversion) {
    localStorage.setItem("tourversion_layout", tourpageversion);
    tour.restart();
}

// Start the tour
tour.start();

Answer 4

tour.start();

如果您不想从第一步重新开始，请不要使用 tour.init();。

Bootstrap 游览，如何强制停止自动启动？

Bootstrap Tour, How do I force stop the auto start?

jquery

bootstrap-tour