0

我在 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 和页面对我来说似乎不同）。

4

3 回答 3

0

这两个按钮（在标题内）就可以了，请查看 DEMO 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>
于 2013-06-20T02:35:29.623 回答
0

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

于 2013-06-19T10:14:03.547 回答
0

尝试如下图左转到登录页面，

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

data-direction="reverse" 用于返回

于 2013-06-19T10:17:01.913 回答