jquery - 2つのボタンを使用して、中央のページから左右にページのトランジションを作成する方法は?

Question

JQMにはログインと登録の2つのページがあり、デフォルトはログインページで、ヘッダーで登録をクリックすると遷移が登録され、逆に登録に戻るをクリックするとログインで終了します。

    <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>

デフォルト（ログインと登録の2つの大きなボタンを含む新しいページを追加）の新しいページを設定する必要があり、ユーザーがログインボタンをクリックして左からログインページに遷移し、登録をクリックして登録ページの右から遷移する.

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

JQM でこれを行う方法は? （jqueryでdivをスライドすることは知っていますが、JQMとページでは違うようです）。

Answer 1

これらの 2 つのボタン (ヘッダー内) で実行できます。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>

Answer 2

以下に示すように、左のログインページに移動してみてください。

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

data-direction="reverse" は戻るために使用されます

Answer 3

スクロールをスムーズにしたい場合は、それを行うjsが必要です