จริงๆ ขี้เกียจจะอัพมากๆ ที่ไม่อัพเพราะว่า เร็วๆ นี้ jQueryTips.com กำลังจะย้ายบ้านอ่ะ สาเหตุหลักๆ ที่ผมไม่อัพเลย ในหลายเดือนที่ผ่านมา เพราะกำลัง จะย้ายบ้านนี่แหละ แล้วก็บ้านใหม่ไม่ใช่ WordPress, Drupal หรือ Free CMS อะไรพวกนี้แล้ว แต่เป็น app ที่เขียนเองครับ ทุกชิ้น ทุกขั้นตอนผลิตเองทั้งหมด แล้วก็ที่สำคัญไม่ได้ผลิตมาใช้ คนเดียว แต่เป็นลักษณะ Multi Users ซึ่งความสามารถไม่แพ้ cms พวกนี้แน่นอน บอกได้แค่นี้แหละ เดี๋ยวไม่ลุ้น
แต่ที่วันนี้ต้องมาอัพเพราะเดี๋ยวกลัวตัวเองจะลืม ผมใช้ jQueryTips แห่งนี้เป็นเหมือน สมุดช่วยจำส่วนตัวน่ะ อิอิ
เคยรู้สึกรำคาญมั้ยครับ กับเวลาที่เราจะทำงานกับ element ก้อนเดียวแต่มันมีหลาย actions ซะเหลือเกิน เช่นกด class นี้วิ่งไปนี่ กดอีก class นึง วิ่งไปทำงานอีกแบบนึง เอาล่ะ สมมุติก่อน

เอาล่ะๆ มาแล้ว หลังจากได้รับ e-mail จำนวนนึง ไปบ่น ว่า “ทำไมไม่อัพเดทเลย” บางคนเขียนมาสอบถามอาการนึกว่าผมป่วยด้วยซ้ำ 555++ ก็เลย คิดว่าจะมาอัพเดท สักบทความนึง
จริงๆ ช่วงนี้ก็ยังไม่ค่อยว่างนักหรอก แต่ กลัวคนจะคิดว่า หายไปไหน จะทิ้งเว็บนี้เหรอ ก็เลยคิดว่า มาอัพเดทสักหน่อย ดีกว่า
สำหรับเรื่องที่จะมาบ่นวันนี้ เป็นคำสั่งนึงใน jQuery ครับ ซึ่งผมคิดว่ามันมีประโยชน์ดี คำสั่งนั้นคือ “data” นั่นเองครับ ปกติเวลาเราจะทำค่า hidden หรือฝากค่าไปกับตัวแปร javascript ที่เป็นลักษณะชั่วคราว เก็บไว้เปรัยบเทียบอ้างอิง ก็มักจะเขียนเช่น

$(‘#enter’).click(function() {

        $(‘input:hidden’).val(’ssss’);

 });

หรือ

<a href="javascript:store(‘value’)">Store my value</a>

แล้วเอาไป push ลง array หรือ new variable ใหม่มาเพื่อเก็บไว้

jQuery เป็น JS Framework ซึ่งมีวิธีการเขียนค่อนข้าง่าย และมี syntax ที่ไม่ซับซ้อน รวมไปถึง selectors ที่เตรียมมา เรียกได้ว่า “สมบูรณ์” เลยทีเดียว ทั้งยังมีการ update ที่ต่อเนื่อง และการเอาใจใส่ จากทีมพัฒนา
ด้วยเหตุนี้เราจึงเห็นได้ว่า plugin ของ jQuery มีมากกว่า plugin ของ JS Framework ตัวอื่นๆ อย่างเทียบไม่ติด และ คนเขียน blog กับมันก็มีไม่น้อย
และหลังจากผมนั่งเก็บ tags เกี่ยวกับ jQuery มานาน จนตอนนี้มีถึง 83 tags เแล้ว ก็เลยอยากจะเอามา share ให้เพื่อนๆ ลองอ่านกันดูบ้าง

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

$(‘#myIframe’).attr(’src’, ’somecontent.html’).load(function() {

    alert(‘Iframe Loaded’);

});

ก่อนที่จะมาเข้าสู่บทความเล็กๆ ของวันนี้ (จริงๆ มันจะสั้นมากจนไม่น่าเรียกว่า บทความ) ผมมีความยินดีที่จะบอกว่า ตอนนี้ jQueryTips.com ft. Thaiajax.com เป็นที่เรียบร้อยแล้ว โดยที่ ตอนนี้ถ้าเข้า เว็บ thaiajax จะ redirect มาที่ jQueryTips แทน
นอกจากนี้ Mr.TuM จะย้ายมาทำการ อัพเดทบทความที่นี่ แทน ว้าว !!!
นอกจากนี้ จะมี นักเขียนหน้าใหม่ มาร่วมด้วยอีก 2-3 คน เร็วๆ นี้ เป็นการเติบโต เล็กๆ ของ jQueryTips จริงๆ หลังจาก นั่งถึกเขียนคนเดียว มาเกือบ 2 ปี (ทีนี้กูจะได้อู้บ้างละ)
สำหรับ TuM เป็น developer ที่เรียกได้ว่า ศึกษา เรื่อง ajax เป็นคนแรกๆ ของไทยเลยทีเดียว ตั้งแต่ตอนที่มันยังไม่บูม [...]

ใจจริงนั้น วันนี้ขี้เกียจอัพเดทมากๆ แต่นี่ก็ใกล้จะหมดเดือน เมษาแล้ว และถ้าอัพบทความนี้สำเร็จ ก็จะกลายเป็นเดือน ที่มีบทความอัพเดทมากที่สุด นั่นก็คือ “11 บทความ” เรียกว่าเป็นการทำลายสถิติ ตัวเอง นั่นเอง 555+
นานมาแล้วครั้งนึงผมเคยแนะนำ plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก Form เป็นตัวที่ค่อนข้างจะใช้งานง่ายมากเลยทีเดียว
แต่ในชีวิตจริงผมไม่ค่อยจะใช้ตัวนั้นหรอกครับ ตัวที่ผมใช้มันคือ ตัวนี้ครับ แต่ด้วยความที่มัน ฉลาดและมากความสามารถ แน่นอน มันต้องทำให้ผมเหนื่อยในการที่จะ่ายทอดออกมาแน่ๆ เลยเพิ่งจะมาขยันเอาตอนนี้แหละครับ
สำหรับ validation plugin ตัวนี้นั้น สามารถที่จะ ตรวจเช็ค ข้อมูลได้หลาย แบบมากๆ เรียกว่าทุกแบบเลยดีกว่า เพราะมันเขียน condition เติมเองได้ รวมไปถึงการ remote เพื่อใช้ตรวจสอบ พวกชื่อ username, email, captcha ได้โดยไม่ต้อง มีการเปลี่ยน [...]

บทความนี้มันมีที่มาครับ เนื่องจาก วันก่อน เห็น K.Non และ K.Golf คุยกันใน Twitter ว่า “เว็บไซด์ thairath ใช้ sIFR ด้วย” ก็เลยทำให้เกิดความสงสัยครับ ว่า ไอ้ sIFR เนี่ย มันคืออะไรหว่า?
และก็ไม่รอช้า ถามพี่ Google ในทันที และก็ไม่ผิดหวัง สุดท้ายก็ได้คำตอบมาว่า
ไอ้ sIFR เนี่มันคือโปรเจคของ พี่ Mike Davidson ซึ่งมีหน้าที่คือ นำ Flash มาแทนที่ตัวอักษรภายใน Element ที่ระบุ โดยที่เราสามารถ ใช้ Font จากที่ไหนก็ได้
แล้วก็ลองทำดูได้หน้าตาออกมาแบบนี้ Online Demo (ลอง view Source ดูประกอบ)
หลักการของมันมีอยู่นิดเดียวเองครับ

ขึ้นหัวข้อมาแบบนี้ ไม่ได้ตั้งใจจะหัดให้เพื่อนๆ เป็นคนขี้เกียจกันนะ แต่ต้องยอมรับก่อนว่า ที่ผมมาเขียน jQuery แทน Javascript แบบปกติ นั้น เป็นเพราะ Syntax มันที่สั้นและสะดวกสะบาย เป็นที่สุด จาก 100 บรรทัด บางทีลดเหลือ บรรทัดเดียวหน้าตาเฉย นี่ล่ะผมเลย ใช้ jQuery มาตลอด
และวันนี้ผมก็จะมานำเสนอ วิธีเขียน jQuery ให้มัน optimize และ สั้นสุดๆ โดยไม่เสีย ความตั้งใจ ในการทำงานของเราไป ลองมาดู วันนี้ผมมีอะไรมาให้ ชิม !
1. ขี้เกียจจะเช็ึีค

// Don’t

if ($(‘#item’).get(0))

  $(‘#item’).somefunction();

// Or

if ($(‘#item’).length)

  $(‘#item’).somefunction();

// Just

$(‘#item’).somefunction();

jQuery จะทำงาน ใน function เฉพาะกรณี ที่ถูกต้องเท่านั้น ไม่จำเป็นต้องไปเช็คให้เสียเวลา
2. เปิดแค่สั้นๆ ก็พอแล้ว

วันก่อนมีเพื่อนที่ทำงานส่ง ไอ้ link นี้มาให้ดู ก็คิดว่าน่าจะเอามา ให้เพื่อนๆ ได้ดูด้วยกัน สำหรับเทคนิค การประยุกต์ใช้งาน jQuery แบบนี้
จากตัวอย่างใน link นี้ เราสามารถทำงานได้โดย ใช้ ภาพแค่ 3 ภาพเองครับ โดยประกอบไปด้วย
1. ภาำพ akuma ยืน
2. ภาพ akuma ปล่อยพลัง
3. ภาพ ลูกพลัง 555+

Trigger เป็นส่วนนึงใน Events ของ jQuery โดยอยู่ในหมด event handing
ถ้าจะให้อธิบาย ตาม manual ของ jQuery กันเป๊ะ ผมว่าคงมึนกันเป็นแถบๆ ดังนั้นผมจะขออธิบาย ในภาษาของผมเองก็แล้วกัน 555+
trigger ในภาษาอื่นๆ เช่น SQL การทำงานของมันก็คือ เป็นตัวบ่งบอกว่า จะทำอะไร ก่อน หลัง หรือ ช่วงไหนก็ตาม หลังจากที่มีเหตุการณ์ หรือ ก่อนที่จะมีเหตุการณ์ เกิดขึ้น เช่น
ผมจะบอกว่า ก่อน กินข้าว ให้แปรงฟันก่อน หรือ หลังกินข้าว ให้ล้างจานด้วย หรือ ระหว่างกินข้าว ให้ใช้ข้อนกลาง ยังไงยังงั้นแหละ