How to skip 10 steps in Bootstrap Tour?

问题:

I have a situation, when I have a tour containing eleven steps.

In each step the popup contains "Prev", "Next", "End Tour" buttons.
Instead of using "End Tour" to "skip", I try to skip all the steps and go to the 11th step, but I can't get this to work.

steps: [
    {
        element: "#mobile",
        title: "Mobile Number",
        content: "Click ‘Next’ to view the next search field, Click ‘Previous’ to view the previous search field and click ‘skip’ to select End result.",
        placement: "right",
        backdrop: true,
        orphan: true,
        template: function (step) {
            return "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-xs btn-pink' data-role='prev'>« Prev</button><span>&nbsp;</span><button class='btn btn-xs btn-danger' data-role='next'>Next »</button><span>&nbsp;</span><button class='btn btn-xs btn-success' data-role='skip'>Skip</button> </div>   </nav>  </div>"
        },
        onNext: function () {
            dir = 'next';
        },
        onPrev: function () {
        },
        onShown: function () {
        }
    }
]

Here i am using data-role as "skip ".and how can i use this as a function like that onShow(), onEnd(), etc.

I tried goTo(i) method also not working.

回答1:

So, after reading DOCs - there is no method out-of-box to do skip steps.

But we can very easily build our own.

---

Simple solution (for exactly this scenario with 3 steps):

1.) add button role skip (our, new, role):

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

2.) write method for skipping that catches skip button click:

$("body").on("click","button",function(){
    if($(this).attr("data-role") === 'skip'){
        alert("skip pressed :)");
        tour.goTo(2);        
    }
});

---

Less simple solution (for all scenarios):

1.) add buttons with role skip (our, new, role):

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

etc

2.) have a method to: a.) find all steps b.) catch clicked button (skip) and it's step number (let's say x)) c.) goTo step x+1

---

Advanced solution:

extend Jquery plugin and add cross-scenario code to it

回答2:

you can use this below code to achive this , For me its working

 onNext: function(tour){
  var curr=parseInt(tour.getState("current_step"));
  while(true){
    curr+=1;
    var step=tour.getStep(curr);
    //TODO: check if it's undefined
    if($(step.element).length){
      tour.goto(curr);
      return curr;
    }
  }
},
onPrevious: function(tour){
  var curr=parseInt(tour.getState("current_step"));
  while(true){
    curr-=1;
    var step=tour.getStep(curr);
    //TODO: check if it's undefined
    if($(step.element).length){
      tour.goto(curr);
      return curr;
    }
  }
}