Simple Parallax Website ด้วย jQuery

หลังจากมั่วๆ งมๆ กับ เว็บไซต์ Parallax ตอนส่งไป YWC จำไม่ได้ละว่าตัวนั้นใช้ js plugin ตัวไหน แต่เหมือนทำไปทำ พอกรรมการเปิดดูหน้าเว็บก็ดันพังไม่เป็นท่า วันนี้ไปเจอคลิปที่ฝรั่งทำไว้ เป็นการทำ Parallax แบบง่ายๆ ด้วย CSS3 และ jQuery เน้นว่า Simple จริงๆ พอจะให้เข้าใจในหลักการของ Parallax แบบพื้นฐาน ไม่รอช้า ไปสดับรับชมคลิปกันเลย

ต่อด้วย ซอร์สของนักพัฒนาเผื่อใครขี้เกียจพิมพ์ตาม

https://github.com/Creativohn/Efecto-Parallax

$.each การวนลูปข้อมูล

ใช้ $.each เพื่อตรวจสอบค่าวางของ field ที่กำหนด โดยจะชื่อ field และ label กำกับ field ไว้ตัวแปรแบบ object ด้านล่าง

var fieldname = {productname:”ชื่อสินค้า”,productprice:”ราคาสินค้า”,productquantity:”จำนวนสินค้า”},

fieldnull = “”;

…

$.each(fieldname,function(i,field){

//i = ชื่อ field
//field = ข้อมูลของชื่อ field แต่ละ field

if($(‘input[name=”‘+i+'”]’).val()==””){
fieldnull += ” <strong>”+field+”</strong> “;

//วนลูปเอาชื่อ input ทียังไม่ได้กรอกค่าไว้ในตัวแปร fieldnull เพื่อนำไปแจ้งเตือนแก่ผู้ใช้
}

})

จากตัวอย่างข้างต้นเป็นเทคนิคง่ายๆ ที่อาจนำไปประยุกต์ใช้ในการตรวจสอบค่าว่างในฟอร์มกรอกข้อมูล เพื่อช่วยให้การเขียนโค้ดเพื่อตรวจสอบดังกล่าวทำได้ง่ายและรวดเร็วมากขึ้น

ส่งค่าโดยใช้ jQuery และ Json

ทดสอบการทำงานของการส่งและรับข้อมูลโดยใช้ json เป็นสื่อกลางระหว่าง client และ server

ส่วน HTML

<form action=”process.php” method=”post” id=”addcontact”>
<input type=”text” name=”firstname” placeholder=”Name”><br/>
<input type=”telephone” name=”telnumber” placeholder=”Tel. “><br/>
<input type=”submit” value=”Save”>
</form>