-1

そのため、ユーザーのログインが必要な webapp を作成しようとしています。私が見つけたこの見栄えの良いログインフォームにあるアイデアを取り入れました。これは、アニメーションフォームの切り替えを使用して同じものを使用しようとしましたが、ボックスが左に配置されます(アクティブとして定義されたものを除く)。ページの読み込み時にアクティブとして定義されたフォームは中央に配置されますが、リンクをクリックしてフォームを切り替えると、配置が失われます。jQuery UI 1.9.2 を使用しています。

ここに私がこれまで持っているコードがあります。以下は、同じコードの jsFiddleです。フォームを常に中央に配置したいのですが、なぜこれが起こらないのかわかりません。私はWeb開発の初心者です。どんな助けでも大歓迎です！

HTML:

<div class="content">
    <div id="form_wrapper" class="form_wrapper">
        <form class="register">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 350px">
                <input type="text" placeholder="First Name" id="fname">
                <input type="text" placeholder="Last Name" id="lname">
                <input type="text" placeholder="Username" id="uname">
                <input type="password" placeholder="Password" id="pwdReg">
                <input type="password" placeholder="Confirm Password" id="pwdRegConfirm">
                <input type="text" placeholder="Email address">
                <button id="Register" class="submitButton">Register</button>
                <label class="textInBox" style="top:20px"><a href="index.html" rel="login" class="linkform">Have an account already? Log in here</a>

                </label>
            </div>
        </form>
        <form class="login active">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 260px">
                <input type="text" placeholder="Username" id="username">
                <input type="password" placeholder="Password" id="password">
                <label class="textInBox" style="top:7px"><a href="#" rel="forgot_password" class="forgot linkform">Forgot your password?</a>

                </label>
                <button id="submitLogin" class="submitButton">Login</button>
                <label class="textInBox" style="top:20px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>

                </label>
            </div>
        </form>
        <form class="forgot_password">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 220px">
                <input type="text" placeholder="Enter your email address here" id="emailAddrResetPass">
                <button id="SendNewPassword" class="submitButton">Reset Password</button>
                <label class="textInBox" style="top:15px"><a href="index.html" rel="login" class="linkform">Remebered password? Log in here</a>

                </label>
                <label class="textInBox" style="top:25px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>

                </label>
            </div>
        </form>
    </div>
    <div class="clear"></div>
</div>

JS:

$(function () {
    //the form wrapper (includes all forms)
    var $form_wrapper = $('#form_wrapper'),
        //the current form is the one with class active
        $currentForm = $form_wrapper.children('form.active'),
        //the change form links
        $linkform = $form_wrapper.find('.linkform');

    //get width and height of each form and store them for later                        
    $form_wrapper.children('form').each(function (i) {
        var $theForm = $(this);
        //solve the inline display none problem when using fadeIn fadeOut
        if (!$theForm.hasClass('active')) $theForm.hide();
        $theForm.data({
            width: $theForm.width(),
            height: $theForm.height()
        });
    });

    //set width and height of wrapper (same of current form)
    setWrapperWidth();

    /*
                clicking a link (change form event) in the form
                makes the current form hide.
                The wrapper animates its width and height to the 
                width and height of the new current form.
                After the animation, the new form is shown
                */
    $linkform.bind('click', function (e) {
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(400, function () {
            //remove class active from current form
            $currentForm.removeClass('active');
            //new current form
            $currentForm = $form_wrapper.children('form.' + target);
            //animate the wrapper
            $form_wrapper.stop()
                .animate({
                width: $currentForm.data('width') + 'px',
                height: $currentForm.data('height') + 'px'
            }, 500, function () {
                //new form gets class active
                $currentForm.addClass('active');
                //show the new form
                $currentForm.fadeIn(400);
            });
        });
        e.preventDefault();
    });

    function setWrapperWidth() {
        $form_wrapper.css({
            width: $currentForm.data('width') + 'px',
            height: $currentForm.data('height') + 'px'
        });
    }
});

CSS:

.loginBox {
    border: 1px solid #a1a3a3;
    border-radius: 2px;
}
.textInBox {
    color: #7f7f7f;
    display: inline-block;
    float: right;
    font: 10px/1 sans-serif;
    left: -29px;
    position: relative;
    text-decoration: none;
    top: 10px;
    transition: color .8s;
}
4

1 に答える 1