พรีวิวรูปภาพ สไตล์ทูลทิป

ถ้าท่านเคยเข้าไปเว็บไซต์ http://themeforest.net เมื่อท่านเอาเมาส์ไปชี้ที่ภาพ มันจะแสดงภาพขนาดใหญ่ขึ้นมาให้ท่านได้รับชม เขาทำกันอย่างไร ตามมาชม

อ่าว … กูเกิลมันเก็บ theme ของ jQuery UI ไว้ด้วยนี่นา

ถ้าใครเป็นแฟนพันธ์แท้ของ jQuery จะทราบดีว่า การเรียกใช้งาน jQuery และ jQuery UI นั้นทำได้ 2 แบบ

jQuery ปฎิทิน

ใกล้ปีใหม่ปฎิทินเป็นเรื่องสำคัญ ก็เลยได้ฤกษ์แนะนำปลั๊กอินของ jQuery ที่เกี่ยวกับปฎิทินสักหน่อย ปลั๊กอินที่จะแนะนำต่อไปนี้ สามารถนำไปประยุกต์ ประกอบกับโปรเจ็กของท่าน ขยายขีดความสามารถของโปรแกรมที่เขียน ให้ดูดี มีคลาส ได้อย่างไม่ยากเย็น และบางตัวที่เป็นปฏิทินแบบเต็มหน้าจอ สามารถนำไปประยุกต์ทำ todo list หรือ event calendar ได้สบายๆแบบไม่ต้องเขียนเองให้มาก

Slide show

เดี๋ยวนี้โค้ดที่ใช้สำหรับแสดงภาพมีให้เลือกใช้หลากหลาย ไม่ต้องมานั่งเขียนเองให้เมื่อยไข่ แต่ก็อย่างว่าแหละ ของมีเยอะแต่ถ้าเราไม่ไปเจอมัน ก็ไม่ต่างอะไรกับไม่มี

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

ป้อนได้เฉพาะตัวเลข

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

เพราะในบางครั้งเราอุตส่าเขียนข้อความชี้แจงไว้ท้ายกล่องเท็กบ้อก ว่าให้ป้อนเฉพาะตัวเลข ไม่วายที่ยูสเซอร์จะใจดี ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย (25,000)

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

ฮ่วย….

จัดการข้อมูลในฟอร์มด้วย .val()

คำสั่ง val() นี่ถือว่าเป็นคำสั่งเด็ดดวงเลยก็ว่าได้ เพราะเราคือผู้ทำเว็บแอพพลิเคชั่น ย่อมหลีกหนีไม่พ้น เรื่องตรวจสอบฟอร์มว่าป้อนไม่ป้อน ติ๊กไม่ติ๊ก บังคับให้ต้องป้อนข้อมูลหรือไม่ เป็นต้น ถ้าเทียบกับ javascript เดิม คำสั่งนี้จะเทียบได้กับ

document.form1.textbox_name.value

ย๊าวยาว…

คำสั่ง val() นี้คำสั่งเดียว สามารถใช้ได้ทั้ง ดึงค่าและกำหนดค่า เรามาดูรายละเอียดกันครับ ว่าใช้งานอย่างไร

val()

parameter : none

คำสั่งนี้ใช้สำหรับดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น

ตัวอย่างการใช้งาน

Live Demo

คำสั่ง clone() ของ jquery

clone(copyHandlers)

copyHandlers : (true|false) เป็นเครื่องหมายบอกว่า ให้โคลน event ไปด้วยหรือไม่ ถ้าเป็น true ก็จะโคลนนิ่ง event ไปด้วย ถ้าเป็น false จะโคลนเฉพาะอีลิเม้นท์ ไม่โคลน event ของอีลิเม้นท์ไป
return : selector

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

$('p').clone(false);
var tag_p = $('p').clone(false);

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

ตัวอย่างการใช้งาน

Live Demo