1

我真的可以使用帮助关闭我正在构建的网页的 Bootstrap 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>
4

4 回答 4

2

你需要搬家

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

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

这是一个 JSFiddle 示例

您可以看到init、start和restart都是如何在用户单击“开始游览”按钮时调用的同一函数中的。

于 2018-01-18T20:24:06.237 回答
0

我在使用 bootstrap-tour 时遇到的一个常见问题是，当最终用户结束巡演时，如果我对巡演进行了更改，则无法对其进行版本化，因此他们会再次看到它，但如果他们已经看到它，请将其隐藏看过那个版本。我可以通过在 tour.init() 和 tour.start() 之间添加下面的代码来解决这个问题。通过更新“tourpageversion”，它有效地添加了版本控制并强制重新启动，以便最终用户可以再次看到游览。参数“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();

于 2018-03-28T17:55:02.127 回答
0

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

tour.start();
于 2018-01-18T20:15:55.533 回答
0 
tour.start();

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

于 2018-04-16T10:55:47.380 回答