jquery - jQuery-steps を使用してカスタム ステップに移動する

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

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 3

これを行う簡単な方法を見つけました。jquery関数を使用できます

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

どのステップに進みたいかを知っていると仮定します。この例では、ウィザードの 3 番目のステップに進みます。クロムエディタを使用して、行きたいステップの正確なIDを見つけてください。

Answer 4

@AbdulJamalの回答に基づいて、任意のステップに実装しました:

$(function () {
    var stepsWizard = $("#wizard").steps({
        ...
    });

    // step variable handles current step (from 0)
    for(var i=0; i<step; i++) {
        stepsWizard.steps("next");
    }
});

stepvariable は、0 以上で定義する必要があることに注意してください。

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

私はそれを機能させるために以下のようなことをしました:

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

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

Answer 7

行きたいステップのIDを取り、トリガーを追加してください！

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