Question

例如，有一个包含3个部分的表单，AB和C.最初用户只能看到A.填写A并单击Next按钮后，屏幕向左滑出A并滑入B从右边。然后，用户可以选择单击Next或Back以分别查看C或A.在C上，用户可以单击“提交”以提交表单，并在数据库中创建“用户”。

我想将这一切都放在一个页面上，如果可能的话，页面底部没有长滚动条。如果需要滚动条，则JQuery-esque会是首选选项。

我似乎无法找到有关此类内容的任何信息。任何帮助将不胜感激！

Answer 1

这样做非常简单，

这是一个有效的演示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>

Rails + Javascript：如何创建一个从左到右滑动/更改表单的按钮？

1 个答案: