例如,有一个表格,由 AB 和 C 三个部分组成。最初用户只能看到 A。填写 A 并单击一个Next
Button 后,屏幕向左滑出 A,从右滑入 B。然后,用户可以选择分别点击Next
或Back
查看 C 或 A。在 C 上,用户可以点击 Submit 提交表单,并且在数据库中创建了 User。
我想把这一切都放在一个页面上,如果可能的话,页面底部没有长滚动条。如果需要滚动条,则 JQuery 风格的滚动条将是首选选项。
我似乎找不到任何关于这样的信息。任何帮助,将不胜感激!
例如,有一个表格,由 AB 和 C 三个部分组成。最初用户只能看到 A。填写 A 并单击一个Next
Button 后,屏幕向左滑出 A,从右滑入 B。然后,用户可以选择分别点击Next
或Back
查看 C 或 A。在 C 上,用户可以点击 Submit 提交表单,并且在数据库中创建了 User。
我想把这一切都放在一个页面上,如果可能的话,页面底部没有长滚动条。如果需要滚动条,则 JQuery 风格的滚动条将是首选选项。
我似乎找不到任何关于这样的信息。任何帮助,将不胜感激!
这样做很简单,
这是一个工作演示http://tympanus.net/Tutorials/FancySlidingForm/ 这是很好的教程http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
只需将此标记中的控件替换为您需要的控件,而不是按钮,您需要启用禁用下一个按钮
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
</fieldset>
<fieldset>
...
</fieldset>
</form>
</div>