使用jQuery-steps跳转到自定义步骤

Question

我在我的应用程序中使用jQuery-steps来创建向导式的情景。然而，我无法找到如何切换到自定义步骤。请问有没有任何帮助？

$(function () {
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        enableFinishButton: false,
        labels: {
            next: $('#next').html(),
            previous : $('#previous').html()

        },
        onStepChanged: function (event, currentIndex, priorIndex)
        {
            if( priorIndex == 0) {
                var selected = $('input[name=radio_wizard]:checked', '#radio_wizard').val()
                switch( selected ){
                    case 1:
                        // GOTO 1 
                        break;
                    case 2:
                        // GOTO 2 
                        break;
                    case 3:
                        // GOTO 3 
                        break;
                }
            }
      }
}

如何实现这个？

- Capuchin

Answer 1

我做了这件事情，所以我创建了这个新函数：

function _goToStep(wizard, options, state, index)
{
    return paginationClick(wizard, options, state, index);
}

未实现的调用，请添加此代码：

$.fn.steps.setStep = function (step)
{

    var options = getOptions(this),
        state = getState(this);

    return _goToStep(this, options, state, step);

};

只是利用已经存在的插件。

用法：

wizard.steps("setStep", 1);

- Fernando Tholl

---

你为什么不将这个作为一个拉取请求提交呢？ - tutuDajuju

我想提醒大家注意，将签名从function(index,step)更改为上面@Fernando Tholl提到的function(step)。 - Cristian E.

我将这个内容添加到我的步骤插件文件中，但仍然报错并显示“尚未实现”！有什么想法吗？谢谢。 - ZAD

我也一样：在$.fn.steps.setStep内部，它说“getOptions”未实现。我很难想象“this”的含义以及setStep主体的范围，以及getOptions应该属于哪个对象。 - jeancallisti

Answer 2

我发现了一个简单的方法。 你可以使用jquery函数

$("#wizard-t-2").get(0).click();

假设您知道要前往哪一步。 此示例将带您到向导的第三步。 使用Chrome编辑器查找要前往的步骤的确切ID。

- Matthew Friedman

Answer 3

stepsWizard = $("#wizard").steps({
        forceMoveForward : true,
        enablePagination: false,
        titleTemplate : '<span class="number">#index#.</span> #title#'
    });

stepsWizard.steps("next"); // this will send us on next step :-)

- Abdul Jamal

---

好的，但问题是关于进入自定义步骤，而不是下一步。 - Michael Scheper

这个回答可能与这个问题无关，但对我解决其他需求很有帮助。请不要删除它。 - Shaik Bajivali

Answer 4

您可以使用简单的循环创建自定义实现：

$.fn.steps.setStep = function (step)
{
  var self = $(this);
  var currentIndex = self.steps('getCurrentIndex');
  // Calculates the number of missing steps to get to the desired step
  var missingSteps = Math.abs(step - currentIndex);
  // The method then determines whether to navigate forward or backward to the desired step by checking if the step parameter is greater than the current index
  var direction = step > currentIndex ? 'next' : 'previous';
  // Move forward or backward by one step each time the loop runs, until it reaches the desired step
  for(var i = 0; i < missingSteps; i++){
    self.steps(direction);
  } 
};

你可以按照以下方式执行这个新方法：

$("#form").steps("setStep", 4); //based on 0 (set the index)

- jdnichollsc

---

这个答案似乎不如排名第一的答案优雅，但与排名第一的答案（存在“getOptions”问题）不同，它对我有效 - 使用Steps 1.1.0。 - jeancallisti

尝试了以上所有方法，但对我都不起作用。这个可以用。 - mshoaibdev

Answer 5

基于 @AbdulJamal 的回答，我已经为任何步骤实现了它：

$(function () {
    var stepsWizard = $("#wizard").steps({
        ...
    });

    // step variable handles current step (from 0)
    for(var i=0; i<step; i++) {
        stepsWizard.steps("next");
    }
});

请注意，变量 step 必须被定义并且其值应大于或等于 0。

- Manolo

---

这将触发跨步事件每一步。直接到达所需的步骤似乎是更好的解决方案。 - Benyamin Shoham

Answer 6

根据文档，目前它似乎缺乏该功能：

/*  
 * Sets a specific step object by index.  
 *  
 * @method setStep  
 * @param index {Integer} An integer that belongs to the position of a step  
 * @param step {Object} The step object to change  
 *
 */
$.fn.steps.setStep = function (index, step) 
{
    throw new Error("Not yet implemented!"); 
};

- Code Maverick

Answer 7

我做了类似以下的事情来使它工作起来：

stepsWizard = $("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section"
});

var indx = 3;
for (i = 0; i <= indx; i++) {
 stepsWizard.steps("next");
}

- Mohamed Thaufeeq

Answer 8

获取您想要跳转的步骤的ID并添加触发器！

$("#steps-uid-0-t-1").trigger("click");

- Linvincible

---

我强烈推荐你的解决方案。简单而稳健。 - rebo lavo

Answer 9

我创建了这个新的函数：

function _goToStep(wizard, options, state, index)
{
    return paginationClick(wizard, options, state, index);
}
And the call that is not implemented, put this:

如果遇到未实现的调用，可以使用以下方法：

$.fn.steps.setStep = function (step)
{

    var options = getOptions(this),
        state = getState(this);

    return _goToStep(this, options, state, index); //Index Instead step

};

wizard.steps("setStep", 1);

运行正常

- Vitor Duarte

Answer 10

function GotoSpecificStep(action, currentStep, number) {
    try
    {
        var stepsTogo = parseInt(currentStep) - parseInt(number);
        for (i = 1; i <= Math.abs(parseInt(stepsTogo)) ; i++) {
            if (action == "next") {
                $(".btnNext").click();
            }
            else if (action == "prev") {
                $(".btnPrevious").click();
            }
        }
    }
    catch(exception)
    {
        MsgBox(exception.message);
    }
}

- Areef Hussain