创建多步骤表单

我一直在寻找一种创建多步forms的方法，例如： http ： //planner.builtbybuffalo.com/step-1/

我找不到任何资源，只是其他例子，我试图创建的那个将是一个3部分的过程。 我将在jQuery中构建它。

我可以理解从一步到另一步的方式，fadein / out等等。但是有一个标记改变并说出了什么步骤。

思考？

Answer 1

试试Janko的这篇博文

“使用jQuery（FormToWizard插件）将任何webform变成强大的向导”

这是他的演示 。

我没有使用过这个插件，但我知道他过去曾经使用过非常好的post。

我希望这有帮助。

编辑：

我最近使用过此插件，效果很好。 它易于使用，易于根据我的特定需求进行修改。

Answer 2

看起来时间轴上的步骤均匀分布。 它可能就像将步数乘以宽度并除以步数来获得标记必须行进的距离一样简单。 然后使用jQuery.animate为标记的位置设置动画。

桑德罗

Answer 3

这里有一个完整的简单三步示例，不需要jQuery。

您只需要定义submit_form()函数。 HTML字符« 和» 只打印«和»，这可能是前一个和下一个按钮字符有趣。

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

  
 
 Part 1
 
  » 
 
 Part 2
 
  « » 
 
 Part 3
  
 « Sum