使用 jQuery-steps 进行自定义步骤答案

【问题标题】：Going to a custom step with jQuery-steps使用 jQuery-steps 进行自定义步骤
【发布时间】：2013-11-26 06:28:31
【问题描述】：

我在我的应用程序上使用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;
                }
            }
      }
}

如何做到这一点？

【问题讨论】：

标签： jquery forms wizard jquery-steps

【解决方案1】：

jQuery('#multisteps_form').steps(
{
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
   // startIndex:2,

    onStepChanging: function() 
    {
        var myform=jQuery('#multisteps_form').serializeArray();
        
        jQuery.ajax({
                url: ajx_url,
                type: 'post',
                data: 
                {
                    'action':'final_submit_data',
                    myform:myform,
                },
                success: function (form_res) 
                {
                    jQuery('#form_submit').html(form_res);
                }
            });
        
        return true; // Most Important
    },
    onFinishing: function() 
    {
        
    },
    onFinished: function() 
    {
    
    }
});

【讨论】：

这是在我的系统中完美运行...只需确保您了解它...您需要为其添加 CDN 链接或自定义 CDN 链接..

【解决方案2】：

获取您想要执行的步骤的 id 并添加触发器！

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

【讨论】：

【解决方案3】：

这是我找到的最简单的解决方案。

找到您的 tablist 项目 ID（在我的例子中是 '#ef_users_list-t-'）
触发点击事件

var tablist_item = 'ef_users_list-t-';

var step = 2; // step number to jump to
$(tablist_item+step).trigger('click');

【讨论】：

【解决方案4】：

我这样做了，所以我在 jquery.steps.js 中创建了这个新函数，在 $.fn.steps.setStep 函数之前插入很重要：

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

在 jquery.steps.js 中找到 $.fn.steps.setStep = function 并替换为：

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

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

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

};

用途：

wizard.steps("setStep", 1);

【讨论】：

【解决方案5】：

onInit: function(event) {
        let div = event.currentTarget;
        let lis = div.getElementsByTagName('li');
        // Choose second tab
        // active is just show style, only effective after clicking tag a.
        lis[1].className += ' active';
        $(lis[1]).children('a').click();
    }

【讨论】：

【解决方案6】：

创建了这个新函数：

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

工作正常

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

另一个简单的解决方案：

var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();

【讨论】：

【解决方案9】：

我做了类似下面的事情来让它工作：

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

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

【讨论】：

【解决方案10】：

添加到@FernandoTholl 的answer above，为澄清起见，wizard.steps("setStep", 1); 加入onStepChanged

$('#wizard').steps({
  onStepChanging: function (event, currentIndex, newIndex) {
      //blah, blah, blah, some code here
  },
  onStepChanged: function (event, currentIndex, newIndex) {
    $('#wizard').steps("setStep", 3);
  },
  onFinished: function () {
      ///more code
  }
});

【讨论】：

【解决方案11】：

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

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

【讨论】：

是的，但问题是关于进入自定义步骤，而不是下一步。
这个答案可能与这个问题无关，但这有助于我满足其他类型的要求。请不要删除它。

【解决方案12】：

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

$.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)

问候，尼科尔斯

【讨论】：

这个似乎不如最佳答案优雅，但与最佳答案（有“getOptions”问题）不同，它对我有用——使用步骤 1.1.0。
首先尝试过，但对我不起作用。这个有效。

【解决方案13】：

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

【讨论】：

这将触发每一步的步进事件。直接进入所需步骤的方法似乎是更好的解决方案。

【解决方案14】：

我找到了一个简单的方法来做到这一点。你可以使用jquery函数

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

假设您知道要执行的步骤。此示例将带您进入向导的第三步。使用 chromes 编辑器找出您要执行的步骤的确切 ID。

【讨论】：

【解决方案15】：

我这样做了，所以我创建了这个新函数：

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

【讨论】：

为什么不将其作为拉取请求提交？
我想提一下，注意将签名从function(index,step) 更改为@Fernando Tholl 提到的上述function(step)
我将此添加到我的步骤插件文件中，但仍然抱怨并说尚未实现！任何想法？谢谢
对我来说也一样：在 $.fn.steps.setStep 内部，它说“getOptions”没有实现。我很难想象 setStep 主体的“this”和范围是什么，以及 getOptions 应该属于哪个对象。

【解决方案16】：

基于documentation，目前似乎缺少该功能：

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

【讨论】：