javascript - Disable 'Next' button temporarily in Bootstrap Tour -
i'm using bootstrap tour build rather restrictive tour in user can proceed next step after spending 3 seconds on current step.
in order to this, gave 'next' button id nextbtn
in tour template, , hope can enable/disable this:
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); }
however, not working. should right approach here?
there typos, main problem have use correct selector access "next" button, not #nextbtn
, it's nesting of classes $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]")
.
in onshow
, onnext
event popover not accessibile because boostrap destroy , recreate it, correct event onshown
:
function execute right after each step shown.
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 step 1" }) tour.addstep({ element: "#two", title: "step 2", content: "content step 2" }) tour.addstep({ element: "#three", title: "step 3", content: "content step 3" }) tour.start()
Comments
Post a Comment