I am using the jQuery.steps plugin (http://www.jquery-steps.com/) to guide the users in an internal webpage.
So far so good, now I am facing a little issue, I do have 5 Steps at the moment, what I need to achieve now is: If in the first step a special value from a dropdown is selected, I have to skip the steps 2 and 4 since these are not required at this moment.
Do you guys may have any solution for this?
I hope you get my question and please let me know if you do need additional information.
Thanks!
In the jquery.steps.js
add class to <ul role=\"tablist\" class=\"tablist\"></ul> (line 1037)
change functions goToNextStep & goToPreviousStep to
var length_custom; function goToNextStep(wizard, options, state) { length_custom = $('ul.tablist li.skip').length; var newIndex = increaseCurrentIndexBy(state, 1); var anchor = getStepAnchor(wizard, newIndex), parent = anchor.parent(), isSkip = parent.hasClass("skip"); if(isSkip){ goToStep(wizard, options, state, newIndex + length_custom) }else{ return paginationClick(wizard, options, state, newIndex); } } function goToPreviousStep(wizard, options, state) { var newIndex = decreaseCurrentIndexBy(state, 1); var anchor = getStepAnchor(wizard, newIndex), parent = anchor.parent(), isSkip = parent.hasClass("skip"); if(isSkip){ goToStep(wizard, options, state, newIndex - length_custom) }else{ return paginationClick(wizard, options, state, newIndex); } }
Then add these functions at the bottom of your file
$.fn.steps.skip = function (i) { var wizard = this, options = getOptions(this), state = getState(this); if (i < state.stepCount) { var stepAnchor = getStepAnchor(wizard, i); stepAnchor.parent().addClass("skip"); refreshSteps(wizard, options, state, i); } }; $.fn.steps.unskip = function (i) { var wizard = this, options = getOptions(this), state = getState(this); if (i < state.stepCount) { var stepAnchor = getStepAnchor(wizard, i); stepAnchor.parent().removeClass("skip"); refreshSteps(wizard, options, state, i); } };
Now, initialize which step you want to skip
$("#wizard").steps('skip', index); $("#wizard").steps('skip', index);// if you want to skip more than one step $("#wizard").steps('skip', index);// if you want to skip more than one step
Disable skip
$("#wizard").steps('unskip', index); $("#wizard").steps('unskip', index);// if you want to unskip more than one step $("#wizard").steps('unskip', index);// if you want to unskip more than one step
There are events called onStepChanging , onStepChanged which could be passed to the form.steps . You can write a function to validate your form and steps in that and based on the currentIndex,newIndex you can trigger the next tab.
I am attaching here the link for the same which would help you.
