J'utilise un jQuery-steps sur mon application pour une situation semblable à celle d'un assistant. J'ai du mal à savoir comment passer à une étape personnalisée. Toute aide avec celui-ci?
$(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;
}
}
}
}
Comment y parvenir?
Je l'ai fait alors j'ai créé cette nouvelle fonction:
function _goToStep(wizard, options, state, index)
{
return paginationClick(wizard, options, state, index);
}
Et l'appel qui n'est pas implémenté, mettez ceci:
$.fn.steps.setStep = function (step)
{
var options = getOptions(this),
state = getState(this);
return _goToStep(this, options, state, step);
};
Profitant simplement de ce qui existait déjà plugin.
Utilisation:
wizard.steps("setStep", 1);
J'ai trouvé un moyen simple de faire cela ... vous pouvez utiliser la fonction jquery
$("#wizard-t-2").get(0).click();
en supposant que vous sachiez à quelle étape vous voulez aller ... Cet exemple vous amènerait à la troisième étape de l'assistant . utilisez l'éditeur de chromes pour déterminer quel est l'identifiant exact de l'étape à laquelle vous voulez aller.
stepsWizard = $("#wizard").steps({
forceMoveForward : true,
enablePagination: false,
titleTemplate : '<span class="number">#index#.</span> #title#'
});
stepsWizard.steps("next"); // this will send us on next step :-)
Vérifiez ma mise en œuvre suivante, qu'en pensez-vous les gars?
$.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');
}
}
};
Et vous pouvez exécuter la nouvelle méthode très facilement:
$("#form").steps("setStep", 4); //based on 0 (set the index)
Cordialement, Nicholls
D'après la documentation , il semble manquer cette fonctionnalité pour le moment:
/*
* 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!");
};
En me basant sur la réponse de @AbdulJamal, je l'ai implémentée pour toutes les étapes:
$(function () {
var stepsWizard = $("#wizard").steps({
...
});
// step variable handles current step (from 0)
for(var i=0; i<step; i++) {
stepsWizard.steps("next");
}
});
Notez que la variable step
doit être définie et égale ou supérieure à 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);
}
}
J'ai fait quelque chose comme ci-dessous pour le faire fonctionner:
stepsWizard = $("#wizard").steps({
headerTag: "h2",
bodyTag: "section"
});
var indx = 3;
for (i = 0; i <= indx; i++) {
stepsWizard.steps("next");
}
Une autre solution simple:
var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();
Ajout au réponse ci-dessus par @FernandoTholl, pour clarification, wizard.steps("setStep", 1);
va dans 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
}
});
Créé cette nouvelle fonction:
function _goToStep(wizard, options, state, index)
{
return paginationClick(wizard, options, state, index);
}
And the call that is not implemented, put this:
Appel qui n'est pas implémenté, mettez ceci:
$.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);
fonctionne très bien