Question

这件事让我疯了。我正在开展一项个人“为了我自己的乐趣”项目，涉及一个很长的注册表格。

我想要做的是将表单拆分为对每个步骤相关的字段进行分组，以及在按下提交之前来回导航的能力，这些标记或某些内容表示哪个步骤是完整的。我已经找到了一些例子，但它们并不真正适合我的设计，无法完全按照我的要求修改它们。

我的目标是与论坛http://forum.xtreamer.net/中的幻灯片放映类似，底部的进度条和可点击的步骤。我想做类似的事情，但是对于表格中的步骤。

我应该从哪里开始？我试着查看他们的代码，看他们是否使用公共或商业（但第三方）jquery插件，但没有骰子。

任何人都可以推荐教程或一些资源吗？

谢谢！

Answer 1

我最近使用jCarousel设计了类似的东西。它是一个jquery插件，允许您轻松滚动到页面上的某些位置或ID。

我们所做的是创建一个长水平页面，左边有几个div。每个div包含一两步，底部有前进和后退按钮。当您单击特定步骤上的下一个按钮时，它会快速滑开，然后下一个按钮将滑入

除此之外，顶部还有绝对定位的按钮，可以单独将您带到每个步骤。

以下是个人导航来回的示例：

<div class="nav">
    <a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">&larr; Back</a>
    <a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next &rarr;</a>
</div>

#1和#3是上一步的ID，后续步骤 - 此代码取自第2步.3000是滚动到表单的每个特定部分的毫秒数。 3秒有点长，但我们在步骤之间有一些动画图像，使表格更有趣！

希望这会有所帮助：）

Answer 2

我认为您正在尝试开发一个用户完成个人详细信息的表单，然后单击转到办公室详细信息，然后单击转到地址详细信息并最后提交。

尝试使用jquery show（）hide（）

将有三个div。

单击时显示一个div，隐藏其他两个div。

应该在每个div中进行验证，并且在完成一个细节时，应该有一些隐藏的标志来检查细节是否已完成。

在提交之前的最后细节，你应该检查每个div的标志。

当您尝试选择返回第一个div时，用户可以先清空详细信息并进入最终版。所以这个标志检查必须

应该工作!!!

使用jQuery将注册表单分成几个步骤

2 个答案: