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

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

ไฟล์งานทั้งหมด
jquery.js
jquery.corner.js
login.js
style.css
members.php

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

จากนั้นก็สร้างเมนูทั้ง login และ signup
ไฟล์ members.php


    
       Login
       Signup

กำหนด 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








Username : 








Password : 







Login ตลอดไป

กำหนด 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






Username: *







Password: *







Password confirm: *







Emailaddress: *

กำหนด 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

ตามด้วยการสั่ง load function onload1() ในตอนที่เปิดหน้าเพจครั้งแรก เพราะว่าเราต้องการ
เปิด form login แต่ปิด form register เอาไว้ก่อน ดังนี้
ไฟล์ members.php

แสร็จแล้วก็สร้างไฟล์ 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");


})
});

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