使用jQuery步骤进入自定义步骤

Question

我在我的应用程序上使用jQuery步骤来实现类似向导的情况.我无法找到如何更改为自定义步骤.对此有何帮助？

$(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;
                }
            }
      }
}

怎么做到这一点？

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);

Answer 2

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

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

假设你知道你想去哪一步.这个例子将带您进入向导的第三步.使用chromes编辑器找出你要去的步骤的确切ID.

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 :-)

Answer 4

检查我的以下实现,你觉得伙计们怎么样？

$.fn.steps.setStep = function (step)
{
  var currentIndex = $(this).steps('getCurrentIndex');
  for(var i = 0; i < Math.abs(step - currentIndex); i++){
    if(step > currentIndex) {
      $(this).steps('next');
    }
    else{
      $(this).steps('previous');
    }
  } 
};

您可以非常轻松地执行新方法:

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

此致,Nicholls

Answer 5

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

/*  
 * 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!"); 
};

Answer 6

根据@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。