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

Question

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

29

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

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve · Answer 1

针对@FernandoTholl上面的答案，补充一点说明：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
  }
});

- tomloprod · Answer 2

另一个简单的解决方案：

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

- YL Mei · Answer 3

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

- Gabriel V. · Answer 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);

};

使用：

- Usman · Answer 5

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

找到您的选项卡列表项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');

- Mahesh Barot · Answer 6

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