使用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();