โดยที่ plugin ตัวนี้จะ ทำหน้าที่นับจำนวน checkbox ที่ถูกติ๊กไปแล้ว ไม่ให้เกินจำนวนที่กำหนด ทั้งยังสามารถกำหนด action ที่จะให้เกิดขึ้นตามเงื่อนไข 2 แบบ ดังนี้

1. เมื่อ check ถึงจำนวนที่กำหนดแล้ว จะปิด checkbox ตัวที่เหลือ ไม่ให้สามารถติ๊กได้อีก จนกว่าจะ ติ๊กอันเก่าออก ให้เหลือตามที่ไม่เกินกำหนด

2. เมื่อ check เกินจำนวนที่กำหนดแล้ว จะ alert ขึ้นมาเตือน และเอาตัวที่ check ล่าสุดออกโดยอัตโนมัติ

ลองมาดูการใช้งานกันเลย

ตรงนี้คือส่วน Script ที่มีการ include ตัว plugin กับ jQuery เข้าไปแล้ว ส่วนของการใช้งานสามารถ config ได้ตาม parameters ต่างๆ ดังนี้

1. el ตรงนี้คือ element ที่จะเกิดผล ซึ่งผมกำหนดให้ตัว ที่มี className = box เป็นตัวที่มีผล

2. limit อันนี้ก็คือ จำนวน maximum ที่สามารถให้ติ๊กได้

3. action ส่วนนี้ผมเขียน action ไป 2 ส่วนตามเงื่อนไขที่ได้บอกไปข้างต้นแล้ว ค่าที่ใส่ลงไปได้คือ “disable” กับ “alert”

4. errorMsg ตัวนี้เป็น parameter ที่จะใช้กับ action = alert เท่านั้น เป็นข้อความที่จะแสดงออกมาเวลา ติ๊กไปจนเกินกำหนดแล้วนั่นเอง

ตัวอย่าง HTML Code

เอาล่ะหลังจากอธิบายมาพอสมควรไปดู Live Demo กันเลยดีกว่า
http://www.jquerytips.com/example/limitcheckbox/demo.html

ถ้าสนใจจะ Download ไปลองเล่นดูบ้างก็ ลองกันได้เลยครับ
http://www.jquerytips.com/example/limitcheckbox/limitcheckbox.zip

เอาล่ะวันนี้ผมก็ขอจบเท่านี้เลยละกัน แต่ขอแย้มโปรเจคใหม่นิดนึง ไหนๆผมก็เขียนเรื่อง Framwork มาพอสมควรแล้ว เร็วๆ นี้ผมจะเปิเวบให้ศึกษา เกี่ยวกับ PHP Framework บ้างแล้วกันครับ หวังว่าคงจะได้รับเสียงตอบรับเหมือนกับที่มีใน jQueryTips.com นะครับ แล้วพบกันเร็วๆ นี้ ^^

ทีนี้เราลองมาดูกันว่ามันเป็นยังไง ไอ้คำสั่ง each เนี่ย

สมมุติว่าผมได้ object มาจาก JSON format ผมสามารถเอามาวนลูป ลักษณะนี้ได้เลย

หรือจะเอามาวนลูปเวลา Get ค่าต่าง ที่ return มาในลักษณะ array ก็ได้ เช่น

เท่านี้เอง ง่ายมั้ยล่ะครับ ที่จริงวันนี้ไม่รู้จะอัพเดทไร เลยเอาเรื่อง ง่ายๆ มาบอก ใครรู้แล้วก็อย่าว่ากันเลยนะครับ 555

Attribute: target=”_blank”
attr นี้ w3c ไม่ให้ผ่านแล้วครับ ทีนี้ เราจะเอา jQuery เข้ามาแก้กัน แบบนี้

แก้ด้วย jQuery

Attribute: autocomplete=”off”
attr นี้ก็ไม่ผ่าน w3c ครับ แต่บางทีเราจำเป็นต้องใช้ เช่นในช่อง username เราไม่อยากให้มันจำค่าเอาไว้

แก้ด้วย jQuery

เห็นมั้ยแก้ไขง่ายนิดเดียวเอง ทีนี้เราจะไป validate ผ่าน W3C ก็จะผ่านได้อย่างไม่ยากเย็น เพราะว่า tag พวกนี้ถูก create on the fly จาก js ซึ่ง W3C ไม่สามารถอ่านเข้ามาถึงตรงนั้น

ต่อไปนี้ถ้า tag ไหนมีปัญหาก็ลองใช้วิธีการแก้ไขแบบนี้ดูนะครับ วันนี้พอแค่นี้ละ สวัสดี@

สถาบันด๊อกเตอร์มาร์ตินได้แบ่งระดับความเมาเหล้าของมนุษย์ไว้ 5
ระดับด้วยกันคือ:

ระดับที่ 1: SMART(ฉลาด)
- เมื่อคนดื่มเหล้าเข้าไปเมาจนถึงระดับนี้ซึ่งเป็นระดับแรก จะรอบรู้ทุกสิ่งทุกอย่างในจักรวาล และมักจะชอบเผื่อแผ่ความรู้ให้ทุกๆคนในบาร์ ความเป็นจริงทุกอย่างในจักรวาลจะถูกนำออกมาเปิดเผยหมด ไม่ว่าใครจะพูดเรื่องอะไรคุณจะกลายเป็นผู้เชี่ยวชาญทางด้านนั้นพอดิบพอดี และคุณจะรู้สึกว่าทุกๆอย่างที่คนอื่นพูดมาจะเป็นเรื่องผิดไปหมด ไม่ตรงกับข้อมูลที่คุณมี จึงจะมีการเริ่มตั้งข้อโต้แย้งต่างๆกัน

ระดับที่ 2: GOOD LOOKING(ดูดี)
- คุณจะเริ่มค้นพบว่าคุณมีรูปร่างหน้าตาที่ดูดีที่สุดในละแวกนั้นและทุกๆคนเริ่มที่จะ หันมาสนใจคุณเพราะคุณดูดี แน่นอนคุณสามารถเดินไปคุยกับทุกๆคนได้ทุกๆ เรื่องด้วยเพราะคุณทั้งดูดี และฉลาด

ระดับที่ 3: RICH(รวย)
- เมื่อเมาถึงระดับนี้คุณจะค้นพบว่าตัวเองนั้นมีเงินมหาศาล คุณสามารถที่จะเลี้ยงเหล้าทุกคนในบาร์ได้ เพราะคุณมีเงินมหาศาล
และถ้าใครพูดอะไรผิดหูคุณสามารถที่จะท้าพนันได้ทุกเรื่องเพราะคุณยังฉลาดกว่าด้วย นอกจากนี้คุณยังดูดีมากๆด้วย

ระดับที่ 4: BULLET PROOF(คงกระพัน)
- เมื่อเมาถึงระดับนี้ตัวคุณจะมีวิชาคงกระพันแก่กล้ากว่าคนทั่วไปและ พร้อมที่จะเข้าห้ำหั่นกับทุกๆคนได้ เพราะไม่มีใครจะทำอันตรายคุณได้ คุณสามารถท้าพนันตีต่อยกับเพื่อนคุณก็ได้ และคุณก็ไม่กลัวแพ้ด้วย เพราะว่าคุณทั้งฉลาด, ทั้งดูดี, ทั้งรวยและต่อสู้เก่งระดับนักมวยอาชีพ

ระดับที่ 5: INVISIBLE(หายตัว)
- ระดับความเมาสุดยอด คุณต้องดื่มมากจึงจะเมาถึงระดับนี้ได้ด้วย ความเมาที่ระดับนี้คุณสามารถทำอะไรก็ได้ เพราะไม่มีใครเห็นคุณ, จะไปเต้นรำบนโต๊ะ, แหกปากร้องเพลงกลางถนน, ไล่ตีหัวคนอื่นก็ทำได้เพราะไม่มีใครเห็นคุณ

เชื่อมั้ยผมเคยเห็นคนเมาถึงระดับ 5 ด้วย (เนอะพี่สาย อิอิ)

อ้าวแล้วทำไมเราต้องอยากรู้?

หลายคนอาจมีคำถามในใจ 555 สำหรับตัวผมเองมันมีประโยชน์แบบนี้ครับ เช่นเวลาที่ผมสั่ง iframe มัน hide เอาไว้ ด้วย display:none ซึ่งแน่นอน มันก็ยังทำการโหลดเป็น background process อยู่ดี แล้วทีนี้ถ้าอยากบอกว่าเมื่อโหลดเสร็จให้มันแสดงล่ะจะทำไงดี?

นี่ล่ะครับประโยชน์ของ Tip! ที่จะมาแนะนกันในวันนี้ ซึ่งวิธีการเขียน โครตจะแสนง่ายจนไม่รู้จะบรรยายยังไงแล้ว แค่ 2-3 บรรทัดก็รู้เรื่อง ตัวอย่างเช่น ผมมี iframe แบบนี้

ผมจะเขียนเช็คดูว่ามัน load ไปเสร็จยังก็จะเขียนว่า….

และนอกจากจะเอาวิธีนี้ไปใช้กับ iframe แล้ว ยังเอามาประยุกต์ใช้กับการ load image ได้ด้วย โดยรูปแบบก็ไม่ได้จะต่างกันเลยล่ะ

เอาล่ะครับ ก่อนจะจากกันไปวันนี้ ผมมีเพลงที่ตอนนี้กำลังชอบมากมาฝากกัน (อย่าไปฟ้องค่ายเค้าล่ะ) ไปฟังกันแล้วก็นอนหลับฝันดีนะ

JSONp เป็น Protocol ที่ใช้เชื่อมเพื่อทำงานกับ Web Service จากที่ต่างๆ โดย API ที่ดังๆ มักจะเตรียมมาไว้ให้ โดยรูปแบบและลักษณะการทำงานจะเป็นดังนี้

1. Request ส่งไปที่ API โดย กำหนดชื่อ Function ที่จะให้ Return หรือ Callback นั่นเอง โดยผมจะยกตัวอย่าง Twitter ดังนี้

URL นี้เป็นการเรียก API ของ Twitter ผ่าน JSONp โดยกำหนดให้ Callback เป็น twitterCallback

2. รับค่าที่ Return โดยการสร้าง Tag Script ไว้รองรับ

โดยตัวอย่างผมจะเอา Twitter Account ของผมมาทดสอบดู ถ้าลองดูผ่าน URL ด้านบนจะสังเกตุเห็นได้ว่า ค่าทั้งหมดจะถูกบรรจุ ในรูปแบบของ JavaScript Function ที่มีชื่อว่า twitterCallback(….)

ต่อจากนั้นผมก็จะมาสร้าง Node เพื่อนำ URL นี้ใส่เข้าไป เพื่อที่จะนำค่ามาใช้งาน

** jQuery Style

จากนั้นผมก็สามารถนำค่าที่อยู่ ใน function มาใช้งานต่อได้เลยเช่น

แค่นี้ผมก็จะได้ค่ามาทั้งหมดเรียบร้อย ซึ่ง API แบบ JSONp นี้มีข้อดีคือ Implement ค่อนข้างง่าย และเสียเวลา Learning ค่อนข้างสั้น รวมไปถึง ไม่มีข้อจำกัดในเรื่อง Rate Limit ของ API เพราะว่า ให้ Client เป็นคนดึงขอมูลเข้ามาเอง จะสะดวกมากสำหรับ API ที่ดัก Server IP เพราะนี่มันต่างคนต่างดึง ใช้ Client IP แทน

แต่ข้อเสียก็มีไม่น้อยนั่นก็คือ API แบบนี้มักจะ สามารถทำได้แค่การ Fetch Data แต่มักจะไม่ Provide ส่วนของการ POST Parameters เข้าไป เช่นพวก Method Insert ต่างๆ แต่ผมว่า เ้ท่านี้ก็สะดวกมากพอแล้ว

และก็อีกเรื่องที่สำคัญกับคนสร้างเวบในยุดคนี้ก็คือ “มันไม่ Support SEO” เพราะว่าใช้การ Render ผ่าน DOM โดยตรง ไม่มี Source Code ในรูปแบบ ที่ Bot View ได้

เอาล่ะครับสาระสำคัญก็หมดไปแล้ว เอาเป็นว่าวันนี้ลากันไปเท่านี้แหละ สวัสดีครับ

ต่อกันเลยนะ….

Content Filters:
:contains(text)
ตัวนี้เป็นการ Filter เพื่อจะหา text ใน element นั่นเอง

เช่นการจะหา element div ที่มี text คำว่า Tee ปรากฎอยู่ก็จะใช้ว่า

:empty
อันนี้จะเป็นการหา element ที่มีค่าว่างอยู่ ตัวอย่างเช่น

:has
เป็นการหา element ที่มีอยู่ใน parent เช่น

:parent
ตัวยี้จะใช้หาค่า parent ของ element เช่น

แบบนี้ค่าที่ได้ควรจะเป็น tr เพราะว่า tr เป็น paraent ของ td นั่นเอง

เอาล่ะพอแล้วกับเรื่องของ Selectors จริงๆมัน เหลืออีก 3 เรื่องที่ยังไม่ได้พูดถึง แต่ว่าน่าจะศึกษาเองต่อได้แล้วเพราะมันไม่ได้ยากอะไรเลย ก็คือเรื่อง
Attribute Filters, Child Filters, Forms, Form Filters

ซึ่งเรื่องที่เหลือนี้ก็มีประโยชน์ค่อนข้างมากยังไงลองไปศึกษากันต่อเอานะครับ ครั้งหน้าจะขึ้นเรื่องใหม่แล้ว ^^

ปล. บทความนี้ใช้เวลาอัพเดทลวกๆ แค่ 5 นาทีเอง อิอิ ง่ายจริงๆ แปล manual เนี่ย

ก็เลยตั้งใจว่าจะลองมาทำ SEO ให้มันดูซะหน่อย เป้าหมายคือ PR5 ในการอัพเดทครั้งหน้า ^^

อีกเรื่องที่เซ็งของวันนี้ นั่นก็คือการดูหนังเรื่อง Friendship เธอกับฉัน ก่อนดูก็หวังไว้ว่าหนังมันคงออกมาแนวๆ ค่าย GTS ต้องมีอะไรให้อิ่มใจ หรือย้อนภาพวันเก่าๆ ได้แน่ๆ

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

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

ปล.ใครยังไม่ดูก็ขอโทษด้วย ไม่ได้ตังใจ แต่มันเหลือทนจริง

ครั้งที่แล้วค้างกันไว้ถึง Basic Filter วันนี้มาต่อกันเลยละกัน

select อีกแบบนึงที่คิดว่า คงได้ใช้บ่อยๆ แน่ๆ ก็คือชุดของ..

Basic Filter:
:first
ตัวนี้คงไม่ต้องอธิบายอะไรมาก เพราะชื่อของมันก็บ่งบอกอยู่แล้ว ว่า first หมายถึงการเรียก element แรกนั่นเองซึ่งกันใช้ก็ไม่ยากอะไร

สมมุติว่าผมมีชุด el ดังนี้

ผมต้องการ el แรกก็จะเขียนแค่

output ที่จะออกมาก็ต้องเป็น data 1 ซึ่งเป็น element แรก ของชุดนี้ ง่ายดีมั้ยล่ะ ต่อๆ ตัวต่อไปกัน เริ่มง่วงแล้ว ขอไปเร็วๆ เลยนะ

:last
อันนี้คงไม่ต้องไปอธิบาย อะไรอีก ก็เหมือยกับตัวข้างบนแหละ แต่ให้ค่า สุดท้าย แทน ถ้าจะ get ค่าออกจาก ชุด elements ตามด้านบน ก็จะได้ค่า data 3 แน่นอน

:not
ตัวนี้เป็น filter ที่ค่อนข้างใช้บ่อยอยู่เหมือนกัน คือระบุค่าที่จะไม่เอาไปเลย เช่น ผมมี input แบบนี้

ทีนี้อยากให้สี bg ของ ตัวที่ไม่เช็ค มันเปลี่ยน ก็จะเขียนแบบนี้

** การใช้ selector แบบ attribute ตามตัวอย่างข้างบน เดี๋ยวจะอธิบายใน ภาค 3 อีกทีนะ ใจเย็น

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

:even
จะ select elements ที่เป็นลำดับ ค่าคี่ เช่น 1, 3, 5

:odd
จะ select elements ที่เป็นลำดับ ค่าคู่ เช่น 2, 4, 6

:eq
ใช้สำหรับ get element ในลำดับที่แน่นอน โดยเริ่มตั้งแต่ 0 = first element เช่น

:gt
ตัวนี้คือ greater than นั่นเอง โดยจะ ให้ค่าทั้งหมดที่มากกว่า index ที่เราระบุ (index เริ่มที่ 0 นะคร๊าบบบ)

แบบนี้จะหมายถึงเอาทุกตัวที่มี index ของ element ที่มากกว่า 0 เช่น ตำแหน่งที่ 2 3 4 อะไรก็ว่าไป

:lt
ตัวนี้ตรงข้ามกัยตัวข้างบน คือเอาค่าที่น้อยกว่าที่ระบุไป

:header
ไอ้นี่ไม่ค่อยได้ใช้บ่อยนัก คือจะเอาค่า ที่เป็น header เช่นมี html

จะเปลี่ยนสีมันเป็นสีอื่นๆ

:animate
ตัวนี้จะจัดการกับค่า element ที่กำลังถูก animate อยู่ อธิบายยากเหลือเกิน ลองดูตัวอย่างของ jQuery.com#animate_filter กันเองดีกว่า

Selectors สำหรับตัวผมเองแล้วคิดว่านี่แหละ คือหัวใจที่ทำให้ผมตัดสินใจเลือกที่จะใช้ jquery เป็น Framework ตัวหลักเลย เพราะมันมี Syntax ของ selector ที่แสนจะง่ายได้ ไม่ว่าจะหยิบจับ DOM ส่วนไหนมาใช้ก็ง่ายนิดเดียว ทำให้จัดการอะไรได้ทุกอย่าง ในหน้าเอกสาร HTML, XML มาเริ่มเข้าเรื่องกันเลยนะ

Basics:
#id
ตัวนี้ไม่มี อะไรยากครับ เป็นการเรียก id ของหน้าเอกสาร ซึ่งเหมือนกับคำสั่ง document.getElementById(’xxx’) นั่นแหละ แต่พอมาอยู่ในรูปแบบ jQuery ทำให้เราเรียกง่ายๆ แค่

element
แบบนี้คือการเรียกเจาะจง element ของ DOM ครับเช่น ผมจะเรียก Body ทั้งหมด

หรือ

.class
แบบนี้คือการระบุ ClassName ครับ เช่นเอกสาร html เรามี

เราก็จะเรียก

*
อันนี้คงไม่ได้ใช้บ่อยนัก คือ มันจะจับทุก elements เลย

selector1, selector2, selectorN
แบบนี้เป็นการเรียกรวม elements หลายตัว หลายๆ แบบ mix กันตามใจชอบเช่น

ซึ่งทุกตัวที่เรียกจะ ถูกทำงานใน คำสั่งที่เราจะเขียน

Hierarchy:
ancestor descendant
การเรียกแบบไล่ไปตาม node จะมีรูปแบบการเขียนคือ
$('#parent p')
แบบนี้จะเป็นการหา p ทั้งหมดที่มี parent แม่เป็น #parent เช่นเอกสาร html

ซึ่งสังเกตุได้ ตัว selector แบบนี้จะมุ่งหาตัว p โดยที่ไม่สนใจว่าจะมี element > li มาคั่นอยู่

parent > child
การหาแบบนี้จะเป็นการรุบุ child ไล่ไปตาม node ที่แท้จริง เช่นผมมี html อยู่แบบนี้

ถ้าผมเขียนแบบนี้ จะหาไม่เจออะไรเลย

ที่ถูกต้องตามรูปแบบ Selector แบบนี้ก้คือ

prev + next
ต่อไปเป็นการหา ในรูปแบบ หน้า และ หลังครับ คือ ตัวที่อ้างอิงไม่ได้เป็น parent เป็นเพียงแค่ตัวก่อนหน้ามันเท่านั้น

สังเกตุดูได้ครับ ว่าตัวที่เอามาอิง เป็นเพียงแค่ตัวที่อยู่ก่อนหน้ามัน คือ input มันเป็น element ที่อยู่หน้า div เท่านั้นเองไม่ได้เป็น parent แต่อย่างใด

prev ~ siblings
ตัวนี้อธิบายยากแฮะ -*- มันก็ คือการหา child ที่อยู่ในราก เดียวกับมัน เพียงแต่ว่าจะอยู่หลังจาก ตัวที่เราอ้างอิง เช่นผมมี html แบบนี้

ถ้าผมเขียน selector แบบนี้

สิ่งที่ผมจะได้ออกมาก็คือ p สองชุดหลังเท่านั้น เพราะว่า p สองชุดหลัง อยู่ในรากเดียวกับ p ที่ระบุ id=prev ซึ่งที่ตัวบน ไม่ได้มาด้วยเพราะว่า การระบุแบบนี้จะเรียกเฉพาะ ตัวที่อยู่หลัง element ที่เราอ้างอิงเท่านั้น

เอาล่ะ วันนี้พอแค่นี้แหละ ขอบอกไว้ก่อนครับ ผมจะไม่พล่ามไปจนจบ manual ของ selectors ทั้งหมดของ jQuery หรอกนะ เพราะมันเยอะอ่ะ แต่จะบอกส่วนที่สำคัญๆ และเป็นพื้นให้ศึกษาตัว ต่อไปได้ไม่ยาก ถ้าใครอยากจะได้ทั้งหมดก็นี่เลยครับ

http://docs.jquery.com/Selectors

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