Bootstrap 游览开始按钮

Question

我在我的站点中使用 bootstrap 并解释我的站点我想使用 bootstrap tour. I have implement this in my test page and work fine. But the tour start when load the page, and I want starting a tour when click a button. I have follow this article 来实现我的 bootstrap 游览。

这是 bootstrap 巡演演示的 javascript：

(function(){

    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

这是 html 部分：

<div class="content-section-a tour-step tour-step-one"> One <br>

<div class="content-section-a tour-step tour-step-two"> Two <br>

<div class="content-section-a tour-step tour-step-three"> Three <br>

如何通过单击按钮开始我的导览？

谢谢

Answer 1

只需在单击按钮时调用 tour.start();，而不是在页面加载时调用。假设您的开始按钮具有 ID start-tour。此代码段可以放在 (function() { ... })

中

$("#start-tour").click(function() {
    tour.start();
});

Answer 2

只需将其更改为重新启动即可。

$("#start-tour").click(function() { tour.restart(); });

Answer 3

首先我们将我们的操作写入一个函数。这里重要的是在函数外写下tour的定义。

var tour = new Tour();    

  function StartTour(){
      tour = new Tour({
        storage : false
      });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start(true);
}

然后我们在按钮点击函数中调用StartTour函数

  $(".tour-step").click(function() {
    StartTour(); 
   });

Bootstrap 游览开始按钮

Bootstrap tour start button

jquery

twitter-bootstrap

bootstrap-tour