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

如何实现这一目标？

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

＆＃13;

stepsWizard = $("#wizard").steps({
        forceMoveForward : true,
        enablePagination: false,
        titleTemplate : '<span class="number">#index#.</span> #title#'
    });

stepsWizard.steps("next"); // this will send us on next step :-)

＆＃13;

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

基于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!"); 
};

Answer 6

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

string

请注意，必须定义$(function () { var stepsWizard = $("#wizard").steps({ ... }); // step variable handles current step (from 0) for(var i=0; i<step; i++) { stepsWizard.steps("next"); } });变量且等于或大于0。

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

Answer 8

通过@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
  }
});

Answer 9

我做了类似下面的事情来实现它：

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

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

Answer 10

另一个简单的解决方案：

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

Answer 11

创建了此新功能：

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

工作正常

Answer 12

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

Answer 13

我这样做是因为我在jquery.steps.js中创建了这个新函数，是在render() { const MainApp = !this.state.isLoading? createAppContainer(Navigator):<></>; return this.state.isLoading?<AppLoading/>:<MainApp/>; }函数之前的重要插入：

$.fn.steps.setStep

在jquery.steps.js中找到function _goToStep(wizard, options, state, index) { return paginationClick(wizard, options, state, index); }并替换为：

$.fn.steps.setStep = function

使用：

$.fn.steps.setStep = function (step) { var options = getOptions(this), state = getState(this); return _goToStep(this, options, state, step); };

Answer 14

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

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

Answer 15

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

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

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

15 个答案: