มาอัพเดทกันซักหน่อย มีลูกเล่นเกี่ยวกับช่องค้นหา (input text) ไม่รู้ว่าจะเรียกว่ายังไงให้เข้าใจกันง่ายๆ เอาเป็นช่องค้นหาก็แล้วกันครับ ปกติผู้ใช้ก็จะพิมพ์คำที่ต้องการค้นหา แล้วก็กด Enter ป๊าบ ก็เรียบร้อย แต่ถ้าเพิ่มคำค้นเป็นสองสามคำ ก็เคาะ spacebar เว้นวรรคไปแบบเรียบๆ เดี๋ยวเรามาเพิ่มลูกเล่นให้กับช่องค้นหาของเรานิดนึง ^^
jquery
-
- เขียนโปรแกรม
เปลี่ยน URL ไม่ต้องรีเฟรส (refresh) เบราว์เซอร์ (browser) พร้อมโหลดหน้าเว็บด้วย Ajax
by gigkokmanby gigkokmanวิธีเปลี่ยน URL โดยที่ไม่ต้องรีเฟรสเบราว์เซอร์เป็นอีกลูกเล่นหนึ่งที่กำลังเป็นที่นิยมของเว็บไซต์จำนวนมากในปัจจุบัน ซึ่งใช้ร่วมกับ Ajax ที่สามารถอัพเดทเนื้อหาของหน้าเว็บโดยที่ไม่ต้องรีเฟรสเบราร์เซอร์ ทำให้เว็บของเราแสดงเนื้อหาให้กับผู้ใช้ได้เร็วขึ้น เพราะโหลดเฉพาะเนื้อหาที่มีการอัพเดทเท่านั้น (ส่วน header, sidebar และ footer ไม่จำเป็นต้องโหลดใหม่) แถมยังทำให้ URL ที่แสดงเปลี่ยนไปเป็นลิงค์ที่ผู้ใช้คลิกได้อีกด้วย แหล่มมั๊ยล่ะ ^^
-
ฟังก์ชัน inArray() เป็นอีกหนึ่งฟังก์ชันที่น่าใช้ใน jQuery ซึ่งจะได้ค่าของ index ของ array ที่เก็บค่าที่เราส่งเข้าไปค้นหา ถ้ามีนะครับ แต่ถ้าไม่มีค่าที่เราค้นหาใน array ก็จะได้ค่าเป็น -1 แทน รูปแบบการใช้งานก็ง่ายๆ ครับ
-
ฟังก์ชัน .on() ได้ถูกเพิ่มเข้ามาใน jQuery เวอร์ชัน 1.7 ซึ่งฟังก์ชัน .on() ใช้สำหรับผูก (attach) event handler function เข้ากับ element ที่เลือกจาก selector และยังสามารถผูกเข้าได้มากกว่าหนึ่ง event ด้วยนะครับ
-
ฟังก์ชัน .trigger() ของ jQuery น่าจะเป็นอีกหนึ่งฟังก์ชันที่หลายๆ คนกำลังตามหาอยู่ก็ได้ครับ เพราะเจ้า trigger สามารถสั่งให้ฟังก์ชันที่ถูกกำหนดให้ event ต่างๆ (event handler) ของ element ทำงาน โดยที่ผู้ใช้ไม่จำเป็นต้องสั่งหรือทำอะไร การจัดการ event ของ jQuery จะครอบ event ของบราวเซอร์ (browser) ไว้อีกที
-
selectors ใน jQuery ถึงแม้ว่าจะเป็นจุดเล็กๆ น้อยๆ แต่ก็ปฏิเสธไม่ได้ว่าเป็นสิ่งที่เราใช้บ่อยที่สุด เพราะเราต้องมีการเลือก element/s ก่อนที่จะนำไปทำอย่างอื่นต่อ ดังนั้น หากเราให้ความสำคัญและปรับแก้ให้มันมีประสิทธิภาพตามที่มันควรจะเป็น ก็จะเป็นการเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเราไปด้วย
-
jQuery จะมี .length ซึ่งเป็นหนึ่ง property ของ jQuery collection ที่จะเก็บค่าของจำนวนของ element ที่ตรงกับ selector เช่น “#myid”, “.myclass” ที่เราส่งเข้าไปในฟังก์ชันของ jQuery การใช้งานเพื่อตรวจสอบว่ามี element ตามที่เราระบุไว้ใน selector หรือไม่ก็สามารถใช้ได้ดังนี้ครับ
-
อ่านหัวข้อแล้วอาจจะงงนิดหน่อย (หรืออาจจะไม่หน่อยก็ได้ ฮ่าๆ) เทคนิคนี้อาจจะไม่จำเป็นต้องใช้กับ iframe ก็ได้ครับ เอาไปใช้กับรูปก็ได้ครับ ซึ่งถ้าใช้เทคนิคนี้จะทำให้หน้าเว็บของเราดูโหลดเร็วขึ้น แต่จะมากหรือน้อยก็ขึ้นอยู่กับ เนื้อหาที่เราโหลดใน iframe หรือขนาดของรูปด้วยนะครับ
-
Deferreds เรียกได้ว่าเป็นเทคนิคที่ใช้จัดการกับการทำงานแบบ asynchronous ที่ใช้เวลานานๆ กว่าจะทำงานเสร็จค่อยส่งผลกลับมา เปลี่ยนเป็นส่ง deferred object กลับมาทันที จากนั้นก็ค่อยนำเอา deferred object ไปผูกฟังก์ชันที่ต้องการให้ทำต่อหรือเรียกว่า callback function ซิ่ง callback จะถูกเรียกใช้งานทันทีหลังจากที่ผลจาก asynchronous ส่งกลับมา
-
Lazy Load เป็น plugin ของ jQuery ซึ่งจะหน่วงการโหลดรูปที่อยู่ในหน้าเว็บที่มีเนื้อหาเยอะๆ ยาวๆ รูปที่ผู้ใช้งานเว็บจะยังไม่ถูกโหลดจนกระทั่งเลื่อน scroll ลงไปถึงรูปจึงจะถูกโหลดจากเซิฟเวอร์ การใช้ Lazy Load บนเว็บไซต์ที่มีเนื้อหาขอหน้าเว็บเยอะๆ จะช่วยให้หน้าเว็บนั้นๆ โหลดเร็วขึ้น เพราะบราวเซอร์จะโหลดเฉพาะรูปที่กำลังแสดงให้ผู้ใช้งานเว็บดูอยู่เท่านั้น