Creazione di moduli in più fasi

StackOverflow https://stackoverflow.com/questions/2074707

  •  20-09-2019
  •  | 
  •  

Domanda

Ho cercato in giro per un modo per creare un modulo in più fasi come ad esempio: http: // planner.builtbybuffalo.com/step-1/

Non riuscivo a trovare le risorse, solo altri esempi, quello che sto cercando di creare sarà un processo in 3 parti. Ho intenzione di essere la costruzione di questo in jQuery.

Posso capire la strada da percorrere di gradino in gradino, fadein / out, ecc Ma avere un cambiamento marcatore e dire quello step.

Pensieri?

È stato utile?

Soluzione

post sul blog da < a href = "http://www.jankoatwarpspeed.com/" rel = "noreferrer"> Janko

"trasformare qualsiasi modulo web in un potente mago con jQuery (plug-in FormToWizard)"

Ecco la sua demo .

Non ho usato questo plugin da lui, ma so che lui ha ottime post che ho usato in passato.

Spero che questo aiuta.

Modifica

Recentemente ho usato questo plugin e ha funzionato grande. E 'stato semplice da usare e facile da modificare per le mie esigenze specifiche.

Altri suggerimenti

Sembra che i passi sulla timeline sono equidistanti. Potrebbe essere semplice come moltiplicare il numero di passo per la larghezza e dividere per il numero di passi per ottenere la distanza il marcatore deve viaggiare. Quindi utilizzare jQuery.animate per animare la posizione del marcatore.

Sandro

Ecco una completa lavorazione semplice esempio tre passi, senza bisogno di jQuery.

Hai solo bisogno di definire la funzione submit_form(). Il caratteri HTML &laquo; e &raquo; basta stampare rispettivamente «e», che potrebbe essere interessante per i personaggi dei pulsanti precedenti e successivi. 

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}
<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <input type="number" value="1" id="num1"><br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top