11

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

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

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

想法？

4

3 回答 3

25

试试Janko的这篇博文

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

这是他的演示。

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

我希望这有帮助。

编辑：

我最近使用了这个插件，效果很好。它使用简单，易于修改以满足我的特定需求。

于 2010-01-15T21:01:38.183 回答
2

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

桑德罗

于 2010-01-15T21:02:10.067 回答
0

在这里，您有一个完整的工作简单的三步示例，无需 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>

于 2017-02-19T20:46:45.687 回答