Bootstrap Tour Startknopf

Question

Ich benutze Bootstrap in meiner Site und um meine Seite zu erklären, die ich bootstrap tour verwenden möchte. Ich habe dies in meiner Testseite implementiert und funktioniert gut. Aber die Tour startet beim Laden der Seite, und ich möchte eine Tour starten, wenn ich auf einen Button klicke. Ich habe diese article folgen, um meine Bootstrap-Tour zu implementieren.

Dies ist ein Javascript, der Bootstrap-Tour Demo:

(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(); 

}()); 

und dies ist der HTML-Abschnitt:

<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> 

Wie meine Tour starten, indem Sie auf eine Schaltfläche klicken?

Dank

Answer 1

Rufen Sie einfach tour.start();, wenn Sie auf die Schaltfläche klicken, und nicht beim Laden der Seite. Angenommen, Ihre Starttaste hat die ID start-tour. . Dieser Ausschnitt kann innerhalb (function() { ... })

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