jquery - 使用 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;
                }
            }
      }
}

如何做到这一点？

score 33 · Accepted Answer

我这样做了，所以我创建了这个新功能：

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

score 20 · Accepted Answer

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

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

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

score 20 · Accepted Answer

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

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

score 18 · Accepted Answer

检查我的以下实现，你们怎么看？

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

问候，尼科尔斯

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

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

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

于 2020-11-17T20:17:16.073 回答

score 1 · Accepted Answer

创建了这个新功能：

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

工作得很好

score 0 · Accepted Answer

我这样做了，所以我在 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);

score 0 · Accepted Answer

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

找到你的 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');

score 0 · Accepted Answer

为澄清起见，将@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
  }
});

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

另一个简单的解决方案：

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

于 2018-01-08T10:41:42.547 回答

score 0 · Accepted Answer

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

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

16 回答 16

Related

Reference