Désactiver temporairement le bouton 'Suivant' dans Bootstrap Tour

Question

J'utilise Bootstrap Tour pour construire une visite plutôt restrictive dans laquelle l'utilisateur ne peut passer à l'étape suivante qu'après avoir passé 3 secondes sur l'étape en cours.

Pour le faire, je lui ai donné le bouton « Suivant » un id nextBtn dans le modèle de la tournée, et espère que je peux activer/désactiver comme ceci:

var tour = new Tour ({ 
    name: "my-tour", 
    template: "...", 
    onNext: function(tour) { 
     $("#nextBtn").prop("disabled", true); 
    }), 
    onShow: function(tour) { 
     window.setTimeout(next, 3000); 
    }); 

function next() { 
    $("#nextBtn").prop("disabled", false); 
} 

Cependant, cela ne fonctionne pas . Quelle devrait être la bonne approche ici?

Answer 1

Il y a quelques fautes de frappe, mais le problème principal est que vous devez utiliser le bon sélecteur pour accéder au bouton "Suivant", ce n'est pas #nextBtn, mais c'est une imbrication des classes $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").

En cas onShow et onNext le popover est Accessibile pas parce que boostrap détruire et recréer, l'événement est correct onShown:

fonction à exécuter juste après chaque étape est affichée.

code:

var timer; 
var tour = new Tour({ 
    onShown: function (tour) { 
     $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", true); 
     timer=window.setTimeout(next, 3000); 
    } 
}) 

function next() {  
    $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", false); 
    window.clearTimeout(timer); 
} 

tour.addStep({ 
    element: "#one", 
    title: "Step 1", 
    content: "Content for step 1" 
}) 

tour.addStep({ 
    element: "#two", 
    title: "Step 2", 
    content: "Content for step 2" 
}) 

tour.addStep({ 
    element: "#three", 
    title: "Step 3", 
    content: "Content for step 3" 
}) 

tour.start() 

Démo: http://jsfiddle.net/IrvinDominin/3YY7Y/