Style SignUp and Login เข้าสู่ระบบด้วย CSS, jQuery

เป็นรูปแแบบของการ สมัครสมาชิก และ Login ด้วยการเขียนโค้ดการ login กับ signup ให้อยู่ในหน้าเพจเดียวกันแล้วใช้ slideUp(),slideDown() ของ jQuery Sliding เพื่อเปิด-ปิด form ที่ต้องการใช้งาน.....

ไฟล์งานทั้งหมด

jquery.js

jquery.corner.js

login.js

style.css

members.php

เริ่มด้วยการสร้างไฟล์ members.php แล้วก็นำเข้าไฟล์ javascript กับ css ดังนี้

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.corner.js"></script>

<script type="text/javascript" src="login.js"></script>

<link type="text/css" rel="stylesheet" href="style.css">

จากนั้นก็สร้างเมนูทั้ง login และ signup

ไฟล์ members.php

<div id="menu">

    <ul>

       <li><a href="#" class="tablogin" id="loadlogin" style="border-top-left-radius: 10px; border-top-right-radius: 10px; ">Login</a></li>

       <li><a href="#" class="tabsignup" id="loadsignup" style="border-top-left-radius: 10px; border-top-right-radius: 10px; ">Signup</a></li>

    </ul>

</div>

กำหนด css ให้กับเมนู

ไฟล์ style.css

#menu{

height:34px;

color:#ffffff;

padding-bottom: 0px;

margin-left:102px;

}

 

#menu ul{

list-style: none;

height:30px;

margin:0 auto;

}

 

#menu ul li{

float:left;

margin:5px;

background:#999999;

}

 

#menu ul li a{

color:#222222;

text-decoration: none;

display: inline-block;

padding:5px;

}

 

#menu ul li a:hover{

color:#2CD2D3;

}

เพิ่ม form สำหรับการ login เข้าไป form login นี้ได้มาจากบทความเรื่อง

"ทำ Login ไม่ต้อง refresh php jQuery Ajax" โดยปรับแต่งนิดหน่อย

http://www.bookneo.com/article.php?id_article=169

ไฟล์ members.php

<div id="showformlogin">

<form name="formlogin" method="post" action="">

 

<div id="user-error"></div>

<span><img style="margin-bottom:0px;" src="images/user.png">

</span>

<label for="username" style="margin-left: 0px;">Username : </label>

<div>

<input id="username" type="text" name="username" style="">

</div>

 

<div class="cleaner_h10"></div>

 

<div id="pass-error"></div>

<span><img style="margin-bottom:0px;" src="images/unlocked.png"></span>

<label for="password" style="margin-left: 0px;">Password : </label>

<div>

<input id="password" type="password" name="password" style="">

</div>

 

<div class="cleaner_h5"></div>

 

<div>

<input type="checkbox" name="check" id="check" value="on">Login ตลอดไป

</div>

 

<div class="cleaner_h5"></div>

<div>

<input type="submit" id="submitlogin" value="Login">

</div>

 

<div class="cleaner_h25"></div>

<div id="login_fail"></div>

</form>

</div>

กำหนด css ให้กับ form login

ไฟล์ style.css

#submitlogin{

margin-left:177px;

background:#3B59A8;

border:1px solid #000;

color:#ffffff;

font-weight:bold;

}

 

input[type=text],input[type=password],#username,#password,

#cfpassword,#email,#cfpassword{

width:235px;

padding: 5px;

}

เพิ่ม form สำหรับการ signup เข้าไป

ไฟล์ members.php

<div id="formregister">

<form name="myform" method="post" action="">

 

<div>

<div style="margin-left:0px;">

Username: <font color="red">*</font>

</div>

<input type="text" name="username" id="username">

</div>

 

<div class="cleaner_h10"></div>

<div>

<div style="margin-left:0px;">

Password: <font color="red">*</font>

</div>

<input type="password" name="password" id="password">

</div>

 

<div class="cleaner_h10"></div>

<div>

<div style="margin-left:0px;">

Password confirm: <font color="red">*</font>

</div>

<input type="password" name="password_cf" id="cfpassword">

</div>

 

<div class="cleaner_h10"></div>

<div>

<div style="margin-left:0px;">

Emailaddress: <font color="red">*</font>

</div>

<input type="text" name="emailaddress" id="email">

</div>

 

<div class="cleaner_h10"></div>

<div>

<input type="submit" id="submitregister" value="Submit" name="submit">

</div>

 

</form>

</div>

กำหนด css ให้กับ form signup

ไฟล์ style.css

#submitregister{

margin-left:167px;

background:#3B59A8;

border:1px solid #000;

color:#ffffff;

font-weight:bold;

}

จากนั้นก็สร้าง

ครอบทั้ง form login และ form signup เอาไว้

แล้วก็กำหนดความสูง ให้เท่ากับหรือมากกว่านิดหน่อย ของ form ที่สูงที่สุด ในที่นี้คือ form signup

แล้วกำหด css ให้ overflow:hidden; เพื่อ... ปิดส่วนเกินที่ไม่ต้องการออก

คือการกระพริบของ from ในการเลื่อนขึ้นเลื่อนลง อย่าลืมว่าเรามี form อยู่ 2 form ที่ซ้อนกันอยู่

แสร็จแล้วในเรื่องของ form และ css

ที่นี้ก็มาในส่วนของ javascript กันบ้าง...

ผมจะเริ่มด้วยการกำหนดมุมโค้งให้กับเมนู login กับ signup ก่อน ด้วยการใช้ jquery.corner.js

เขียนโค้ดลงไป ระหว่าง tag head ดังนี้

ไฟล์ members.php

<script type="text/javascript">

$(".tablogin").corner("top","2px");

$(".tabsignup").corner("top","2px");

</script>

ตามด้วยการสั่ง load function onload1() ในตอนที่เปิดหน้าเพจครั้งแรก เพราะว่าเราต้องการ

เปิด form login แต่ปิด form register เอาไว้ก่อน ดังนี้

ไฟล์ members.php

<script type="text/javascript">

window.onload=function(){onload1()}

</script>

แสร็จแล้วก็สร้างไฟล์ javascript ชื่อ login.js แล้วสร้าง function onload1()

ขึ้นมาดังนี้

ไฟล์ login.js

function onload1(){

   $(document).ready(function(){

       $("#showformregister").hide(); //ซ่อน form register

       $("#loadsignup").removeClass("tabsignup");// ลบ highlight tab menu

       $("#loadlogin").addClass("tablogin");// เพิ่ม highlight tab menu

 

    });

 }

ตามด้วยคำสั่งในการ click tab menu เพื่อเรียกแสดง form ของแต่ละ form ดังนี้

ไฟล์ login.js

/*-----------------FORM LOGIN-------------------*/

$(function(){

$("#loadlogin").click(function(){

    $("#showformregister").slideUp(800).fadeOut(800);

    $("#showformlogin").slideDown("slow");

    $("#loadsignup").removeClass("tabsignup");

    $("#loadlogin").addClass("tablogin");

 

})

});

 

/*-----------------FORM SIGUP-------------------*/

$(function(){

$("#loadsignup").click(function(){

    $("#showformlogin").slideUp(800).fadeOut(800);

    $("#showformregister").slideDown("slow");

    $("#loadlogin").removeClass("tablogin");

    $("#loadsignup").addClass("tabsignup");

 

 

})

});

จบแล้ว....เชิญทดสอบ