Question

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

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

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

思想？

Answer 1

从blog post

尝试此Janko

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

这是他的demo。

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

我希望这会有所帮助。

修改

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

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

<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>

创建多步骤表单

3 个答案: