jQuery.steps跳过一步

问题描述

我正在使用jQuery.steps插件( http://www.jquery-steps.com/)以在内部网页中引导用户.

I am using the jQuery.steps plugin (http://www.jquery-steps.com/) to guide the users in an internal webpage.

到目前为止，到目前为止，我面临一个小问题，我确实有5个步骤，现在我需要实现的是:如果在第一步中选择了下拉菜单中的特殊值，我必须跳过步骤2和4，因为目前不需要这些步骤.

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.

谢谢！

推荐答案

在jquery.steps.js

将类添加到<ul role=\"tablist\" class=\"tablist\"></ul>(第1037行)

add class to <ul role=\"tablist\" class=\"tablist\"></ul> (line 1037)

更改功能goToNextStep& goToPreviousStep至

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

禁用跳过

$("#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

这篇关于jQuery.steps跳过一步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！