如何使用两个按钮从中间页面创建从左到右的页面转换？

Question

我在JQM中有两个页面，登录和注册，默认是登录页面，在标题i如果单击注册转换发生注册，反之亦然如果您在注册中单击上一步，则在登录时结束。

    <div data-role="page" id="login-page">
        <div data-role="header">
            <a href="#register-page">Register</a>
            <h1>Login</h1>
        </div>

        <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
            <form>

            </form>
            <input type="button" id="login" value="Login" class="large_input" style="min-height: 60px;">
        </div>

        <div data-position="fixed" data-role="footer">
            <h4 id="login_message"></h4>
        </div>
    </div>

    <div data-role="page" data-add-back-btn="true" id="register-page" class="ui-content-transparent">
        <div data-role="header">
            <h1>CVE Registration</h1>
        </div>

        <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
            <form>


            </form>
            <input type="button" id="register" value="Register" class="large_input" style="min-height: 60px;">
        </div>

        <div data-role="footer" data-position="fixed">
            <h4 id="register_message"></h4>
        </div>
    </div>

我需要设置默认(添加新页面与两个大按钮登录和注册)新页面，当用户点击登录按钮，使从左侧过渡到登录页面，当单击注册，使从注册页面从右侧过渡。

Login Page ====> Default with two buttons <==== Register Page

如何在JQM中做到这一点？(我知道在jquery中滑动div，但使用JQM和页面对我来说似乎不同)。

Answer 1

你需要一些js来做到这一点，如果你想让它滚动平滑的话。

Answer 2

尝试如下所示，向左转到登录页面，

<a href="#Loginpage" data-direction="reverse">Login</a>

data-direction="reverse“用于返回

Answer 3

这两个按钮(内部标题)可以，请检查演示http://jsfiddle.net/yeyene/Rdfxs/3/

<div data-role="page" id="login-page">
    <div data-role="header">
        <a href="#register-page" data-role="button" data-theme="b" data-transition="slide">Register</a>
        <h1>Login</h1>
    </div>
    <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
        <form>
        </form>
        <input type="button" id="login" value="Login" class="large_input" style="min-height: 60px;">
    </div>
    <div data-position="fixed" data-role="footer">
        <h4 id="login_message"></h4>
    </div>
</div>

<div data-role="page" id="register-page" class="ui-content-transparent">
    <div data-role="header">
        <a href="#login-page" data-role="button" data-theme="b" data-transition="slide" data-direction="reverse">Login</a>
        <h1>CVE Registration</h1>
    </div>
    <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
        <form>
        </form>
        <input type="button" id="register" value="Register" class="large_input" style="min-height: 60px;">
    </div>
</div>