jQuery Girl
  1. jQuery Girl
  3. Aller à une étape personnalisée avec jQuery-steps
Intereting Posts
La requête envoyée par le client était syntaxiquement incorrecte Plusieurs règles de validation personnalisées dans le plug-in Jquery Validate Barre de progression ASP.net mise à jour via jQuery ajax lors de l’opération asynchrone Contrôle ASP.net FileUploader – cliquez sur à l’aide de jQuery jQuery .attr () et valeur Attendez que la méthode jquery .html termine le rendu invoquer annuler le jeditable asp.net mvc 3 téléchargement de fichier de razor Comment obtenir un object JSON en Python (Flask Framework) slideUp ne cache que? ne peut pas montrer en utilisant slideUp Rails 3.2 a_de nombreux processus de soumission de formulaire JQuery backstretch à l’intérieur div? Comment lire un fichier en utilisant jQuery et obtenir le contenu de la tête et du corps? Télécharger l’image sur canvas à l’aide de JS Jquery arrêter une fonction si elle ne se termine pas assez rapidement

Aller à une étape personnalisée avec jQuery-steps

J’utilise une application 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 juste 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 chromes pour déterminer l’identifiant exact de l’étape à laquelle vous souhaitez aller. 

 stepsWizard = $("#wizard").steps({ forceMoveForward : true, enablePagination: false, titleTemplate : '#index#. #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

Sur la base de 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

Notez que la variable d' 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); } }

Ajout à la réponse ci-dessus de @FernandoTholl, à des fins de clarification, wizard.steps("setStep", 1); entre 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 } });

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