web-dev-qa-db-ja.com

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

私はアプリで 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;
                }
            }
      }
}

これを達成する方法は？

jqueryformswizardjquery-steps
20
thevangelist

これを行ったので、この新しい関数を作成しました。

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);
29
Fernando Tholl

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

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

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

17
Matthew Friedman
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
Abdul Jamal

私の次の実装をチェックしてください、皆さんはどう思いますか？

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

よろしく、ニコルズ

9
jdnichollsc

ドキュメント に基づいて、現時点ではその機能が欠けているようです：

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

@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以上でなければならないことに注意してください。

3
Manolo
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);
    }
}
1
Areef Hussain
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();
    }
0
YL Mei

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

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

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

別の簡単なソリューション：

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

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

この新しい関数を作成しました：

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

正常に動作します

0
Vitor Duarte