使用 jQuery-steps 进入自定义步骤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19957432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Going to a custom step with jQuery-steps
提问by thevangelist
I am using a jQuery-stepson my app to for a wizard-like situation. I am having trouble finding out how to change to a custom step though. Any help with this one?
我在我的应用程序上使用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;
}
}
}
}
How to achieve this?
如何实现这一目标？
回答by Fernando Tholl
I did this so I created this new function:
我这样做了，所以我创建了这个新函数：
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, step);
};
Just taking advantage of what already existed plugin.
只是利用已经存在的插件。
Use:
用：
wizard.steps("setStep", 1);
回答by Matthew Friedman
I found a simple way to do this. you can use the jquery function
我找到了一个简单的方法来做到这一点。你可以使用jquery函数
$("#wizard-t-2").get(0).click();
assuming you know what step you want to go to. this example would bring you to the third step of the wizard. use chromes editor to figure out what the exact id is of the step you want to go to.
假设您知道要进行的步骤。此示例将带您进入向导的第三步。使用 chromes 编辑器找出您要执行的步骤的确切 ID。
回答by Abdul Jamal
stepsWizard = $("#wizard").steps({
forceMoveForward : true,
enablePagination: false,
titleTemplate : '<span class="number">#index#.</span> #title#'
});
stepsWizard.steps("next"); // this will send us on next step :-)回答by jdnichollsc
Check my following implementation, What do you think guys?
检查我的以下实现，你们怎么看？
$.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');
}
}
};
And you can execute the new method very easy:
您可以非常轻松地执行新方法：
$("#form").steps("setStep", 4); //based on 0 (set the index)
Regards, Nicholls
问候， 尼科尔斯
回答by Code Maverick
Based on the documentation, it seems to lack that functionality as of right now:
根据文档，它现在似乎缺乏该功能：
/*
* 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!");
};
回答by Manolo
Basing on @AbdulJamal answer, I've implemented it for any step:
根据@AbdulJamal 的回答，我已经为任何步骤实施了它：
$(function () {
var stepsWizard = $("#wizard").steps({
...
});
// step variable handles current step (from 0)
for(var i=0; i<step; i++) {
stepsWizard.steps("next");
}
});
Note that stepvariable must be defined and equal or greater than 0.
请注意，step必须定义变量并且等于或大于 0。
回答by Areef Hussain
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);
}
}
回答by Steve
Adding to the answer aboveby @FernandoTholl, for clarification, wizard.steps("setStep", 1);goes in onStepChanged
为澄清起见，@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
}
});
回答by Mohamed Thaufeeq
I did something like below to get it worked:
我做了类似下面的事情来让它工作：
stepsWizard = $("#wizard").steps({
headerTag: "h2",
bodyTag: "section"
});
var indx = 3;
for (i = 0; i <= indx; i++) {
stepsWizard.steps("next");
}
回答by tomloprod
Another simple solution:
另一个简单的解决方案：
var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();
