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

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

怎么做到这一点?

我这样做了所以我创建了这个新function:

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

我发现了一种简单的方法。 你可以使用jquery函数

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

假设你知道你想去哪一步。 这个例子将带您进入向导的第三步。 使用chromes编辑器找出你要去的步骤的确切ID。

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

检查我的以下实现,你觉得伙计们怎么样?

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

根据文档 ,它似乎缺乏现在的function:

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

基于@AbdulJamal的回答,我已经为任何步骤实现了它:

 $(function () { var stepsWizard = $("#wizard").steps({ ... }); // step variable handles current step (from 0) for(var i=0; i 

请注意,必须定义step变量并且等于或大于0。

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

通过@FernandoTholl添加上面的答案 ,澄清wizard.steps("setStep", 1);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 } }); 

我做了类似下面的工作来实现它:

 stepsWizard = $("#wizard").steps({ headerTag: "h2", bodyTag: "section" }); var indx = 3; for (i = 0; i <= indx; i++) { stepsWizard.steps("next"); } 

另一个简单的解决

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