آموزش ساخت فرم ورود و ثبت نام hide-show با جی کوئری

1396/9/21 علیرضا حاتمی نیا 624

کاربران محترم وبسایت ilikephp و علاقه مندان به آموزش های ویژه سلام. در آموزش ویژه امروز قصد داریم تا به آموزش ساخت فرم ورود و ثبت نام ک صفحه به صورت hide-show توسط Jquery و Css3 بپردازیم.

فرم login و signup در یک صفحه

هنگامی که لازم است کاربران به حساب کاربری خود وارد شوند و یا در اصطلاح لاگین کنند، معمولا به صفحه ای هدایت می شوند تا با وارد کردن اطلاعات خود عملیات login را انجام دهند. اما گاهی کابرانی به این صفحه هدایت می شوند که قبلا در سایت ثبت نام نکرده اند و قبل از ورود به سیستم بایستی فرایند ثبت نام در سایت را انجام دهند. پس لینکی در اختیار آنها قرار می گیرد تا توسط آن به صفحه ثبت نام هدایت شوند. در طراحی های جدید هر دو فرم login و signup داخل یک صفحه قرار می گیرند و معمولا ابتدا فرم ثبت نام یا signup مخفی می شود و در صورت نیاز و پس از فشردن دکمه signup فرم login مخفی و فرم signup نمایش داده می شود.این کار توسط جی کوئری به راحتی انجام میگیرد.

قبل از شروع آموزش این بخش لازم است تا با مفاهیم زیر آشنایی داشته باشید

ابتدا فرم ثبت نام و لاگین را با کلاس های signup و login داخل یک div اصلی با کلاس main به شکل زیر طراحی می کنیم:

کدهای HTML

   <div class="main">
        <div class="login">
            <h3>Login</h3>
            <form method="post" action="">
                <input type="email" placeholder="Email">
                <input type="password" placeholder="password">
                <a href="#" id="login2">Login</a>
                <a href="#" id="signup">signup</a>
            </form>
        </div>
        <div class="signup">
            <h3>signup</h3>
            <form method="post" action="">
                <input type="email" placeholder="Email">
                <input type="password" placeholder="password">
                <input type="password" placeholder="confirm passwprd">
                <a href="#" id="login">Login</a>
                <a href="#" id="signup2">signup</a>
            </form>
        </div>
    </div>

سپس توسط css فرم ها را وسط صفحه قرار می دهیم. جهت این کار مقدار position کلاس main را برابر relative و برای کلاس های login و signup برابر absolute قرار می دهیم. همچنین مقدار left را برای این دو کلاس 50% است. ضمنا برای اینکه دقیقا فرمها وسط صفحه قرار بگیرند بعد از آن مقدار margin-left برای این دو کلاس را برابر -180px تعیین شده است. همچنین مقدار display برای کلاس signup را برابر none قرار دادیم تا فرم ثبت نام مخفی شود.

کدهای Css

body {
    background-color: gray;
}
.main {
    position: relative;
    margin-top: 100px;
}
h3 {
    text-align: center
}
.login , .signup {
    width: 300px;
    background-color: #ffffff;
    padding: 20px;
    position: absolute;
    left: 50%;
    margin-left: -180px;
}
.signup {
    display: none;
}
input [type=email] , [type=password] {
    width: 100%;
    margin-top: 10px;
    height: 20px;
}

بسیار عالی. حالا توسط جی کوئری تعیین می کنیم که اگر روی دکمه ای با مشخصه id=signup کلیک شد فرم با کلاس login مخفی شود و بعد از آن فرم با کلاس signup نمایان شود و برای دکمه با مشخصه id=signup نیز تعریف کردیم که بعد از کلیک روی آن فرم با کلاس signup مخفی و فرم با کلاس login نمایش داده شود.

همچنین توسط متد animate نیز قبل از مخفی کردن فرمها به این صورت عمل کردیم که ابتدا فرم جاری را به میزان top=200px به سمت پایین حرکت بده و بعد از آن فرم مخفی می شود.

کدهای jquery

$(document).ready(function(){
            $('#signup').click(function(){
                $('.login').animate({top:'200px'})
                $('.signup').animate({top:'0'})
                $('.login').hide(300,function(){
                    $('.signup').show(300);
                });
            })
            $('#login').click(function(){
                $('.signup').animate({top:'200px'})
                $('.login').animate({top:'0'})
                $('.signup').hide(300,function(){
                    $('.login').show(300);
                });
            })
        })

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت