บทความของวันนี้ผมจะมาแนะนำการทำเมนู แบบ horizontal ที่มี sub ย่อย 1 ระดับกัน ที่ผมเขียนบทความนี้ก้เพราะผมไปเห็นเพื่อนบางคน เขียน javascript ยุบยับ เดี๋ยวจับ onclick ตัวนี้ ซ่อนตัวโน้น เขียนกันให้ยาวเฟื้อย มาลองวิธีแบบ jQuery ดีกว่า รับประกันความง่าย ^_^

จั่วหัวกันซะมั่วซั่ว ก้อย่างเพิ่งงงไปซะก่อนล่ะ พอดีผมเปิด dict หาความหมายของคำว่า sibling มันแปลออกมาอย่างนี้ผมก็เลยเอาตามนี้แหละ ^_^

สำหรับ siblings ประโยชน์ของมันก็คล้ายๆกับการหา tag เดียวกันแต่ตัวอื่นๆ -*- พูดไปพูดมาก็งงตัวเอง เอาเป็นว่ามาลองดูตัวอย่างกันจะได้ไม่งง เช่นผมจะทำแถบ highlight ให้กับ ข้อมูลชุดนึงเมื่อเอา mouse ไปวางเหนือข้อมูลนั้นๆ ขณะที่เวลาเอา mouse ออก ก็ให้ highlight นั้นหายไปด้วย ผมสามารถเขียนได้ง่ายๆ โดยใช้คำสั่ง siblings นี่แหละ

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

เอาล่ะๆ เรามาเข้าเนื้อเรื่องของวันนี้กันดีกว่า ก่อนที่ความขี้เกียจจะเข้ามาแทรกแซง เนื่องจากวันนี้มีเวลาไม่มากนักก็เลยจะขออธิบายเรื่องง่ายๆ อย่าง selector ก็แล้วกันนะครับ

Selector ของ jQuery นั้นถือเป็นจุดเด่นอีกอย่างนึงของมันเลยก็ว่าได้ เพราะทำให้เราสามารถเรียกใช้งาน node ในส่วนต่างๆ ของหน้าเอกสารได้ดังใจนึกเลยทีเดียว ซึ่งในกลุ่ม selectors ของ jQuery นั้นมีหลายกลุ่มทีเดียวแต่วันนี้ผมขออธิบายแค่ในกลุ่มของ Forms ก่อนแล้วกัน

ในกลุ่มของ Forms นั้นก้มี input ต่างๆ ซึ่งคนที่เขียน html คงรู้หมดแล้ว ก็คือไอ้พวก inpu text checkbox radio ต่างๆ นั่นแหละ ทีนี้เราลองมาดูการเรียกใช้งานผ่าน jQuery บ้าง

ลักษณะการเรียกใช้งานก็ไม่ยากเย็นอะไรเลย บรรทัดเดียวก็จบ ตัวอย่างเช่น

วันนี้จะมาขอพูดถึงเรื่องการทำงานของ jQuery กับ XML จริงๆ แล้วตัวของ Jquery สามารถทำงานกับรูปแบบเอกสารได้หลายชนิด คือ
1. HTML
2. XML
3. JSON
4. Script

ซึ่งผมมองว่าทุกตัว jQuery สามารถทำได้ดีพอๆกัน เลยว่าจะอธิบายให้หมด (ยกเว้น HTML) แต่เนื่องด้วย.... เวลาอันน้อยนิดของผม ขอเอาเป็นรูปแบบยอดฮิตก่อนละกัน นั่นก็คืออะไรน่าจะเดากันออก XML เพื่อนเลิฟไง ^_^

ซึ่งในการคืนค่าจาก Ajax บางครั้ง เราอาจจะต้องใช้งาน XML กันบ้าง แน่นอนว่า Javascript ตามปกติเราก็พอจะทำกันได้บ้าง แต่ว่ากว่าจะ อ่านกว่าจะไต่ node กว่าจะแปลงล่างกลับมาเป็น html โคดก็ปาไปเกือบ 100 บรรทัด ทีนี้ลองเปลี่ยนมาใช้ jQuery กันบ้าง ว่าจะง่ายกว่ายังไง

ในที่นี้ตัวอย่าง XML ที่ผมจะเอามาทดสอบด้วยคือ XML ที่เป็นรูปแบบ sitemap ที่ Google อณุญาติให้เราใช้ทำการ submit ละกันครับ

เอาล่ะครับ อาจจะข้ามขั้นไปนิด ก็คนมันอยากเขียนอ่ะ บอกไว้ก่อนเลยนี่เป็นแค่ "First Step" เท่านั้น จะมาขอกล่าวเรื่อง พื้นๆที่ jQuery ทำได้ เกี่ยวกับ ajax ก่อน ลึกๆมันเขียนได้หลายรูปแบบมาก สามารถกำหนดลำดับการทำงาน ก่อนหลัง header รวมไปถึงข้อมูลที่รับ กลับมาได้ วันนี้เอา เบาะๆ แค่ การส่งค่าไปมาละกันเน้อ

การทำงานในส่วน ajax ของ jQuery นั้นค่อนข้างเป็นมิตรกับ SEO มากๆ เพราะตัวมันสามารถดักจับ events ต่างๆ ขณะที่เรากำลังไต่ไปในเอกสารได้ สำหรับวันนี้จะขอแนะนำแค่คำสั่งพื้นๆ ในการทำงานกับ ajax ของ jQuery สัก 2 คำสั่งจะได้ไม่ยากและงงกันจนเกินไปนะ คำสั่งแรกคือการส่งค่าไปแบบ get และรับกับมาแบบ text ธรรมดา

$.get(url, params, callback);

โห ช่วงนี้อัพเดทไววันต่อวันเลย อยากทำได้แบบนี้นานๆจัง อิอิ

ผ่านมาถึงตอนที่ 4 แล้ว ถ้าอ่านกันมาถึงตอนนี้แสดงว่าเพื่อนๆ คงจะสนใจใน library ตัวนี้บ้างจริงมั้ย และผมก็มั่นใจว่าคงแอบไปศึกษาหาความรู้กันเองมาบ้าง ตาม blog ต่างประเทศ หรือ Document ของเวบผู้พัฒนา เพราะถ้าไม่ไปอ่านเอาเองบ้าง แล้วหวังจะมาอ่านตามบล๊อกของผม ผมว่าเละแน่นอน 555 เพราะผมจะเขียนแค่คร่าวๆ เท่านั้น อ่ะนะ เอ้ามาเข้าเรื่องที่จะพูดวันนี้กันเลยดีกว่า....

สำหรับ selector ของ jQuery จะเป็นลักษณธของการไต่ตามหน้าเอกสาร(DOM) ซึ่งมาถึงตอนนี้ผมยังไม่เห็นส่วนไหนใน เอกสารเลยที่มันจะ get ค่าออกมาไม่ได้ ลองมาดูตัวอย่างกัน

สมมุติผมมีเอกสาร HTML ดังนี้

หลายๆ ท่านที่เขียน JavaScript คงจะเคยชินกับการจับ Events ต่างๆ เช่น onclick, onblur, onkeyup, onkeydown, etc. ซึ่งตัวผมเองคิดว่าไอ้พวกนี้มันไม่มีผลดีต่อ SEO นัก เพราะ SE ไม่มองอยู่แล้ว จรืงมั้ย ?

แต่ว่าพอเปลี่ยนมาเป็น jQuery ล่ะ ไม่ต้องจับ Events พวกนี้เหรอ ปล่าวครับ ก็ยังจับเหมือนเดิมเพียงแต่ว่า ไม่ได้จับตรงๆ แต่ใช้การดัก Event จากตำแหน่งของ เอกสาร (DOM)

มันเป็นยังไงน่ะเหรอ เอ้าลองมาดูกัน....

สมมุติผมจะเขียน onclick ตามปกติของ JavaScript ผมก็จะเขียนแบบนี้

<a href="#" onclick="location.href="....">The Link</a>

ซึ่งลองมาดูกันตามหลัก SEO จะเห็นว่า SE มองที่ # และก็ไม่สามารถไปต่อตาม link ที่เรากำหนดไป เพราะมันไม่สน onclick ซึ่งเป็น event ใน JavaScript อยู่แล้ว

แต่ถ้าเราเปลี่ยนเป็น jQuery ล่ะ ?

เอาล่ะครับมาอัพเดทแล้ว กว่าจะทำใจมาเขียนได้ไม่ใช่เรื่องง่ายเลย T_T ด้วยความที่ปกติเป็น คนขยันน้อยอยู่เป็นทุนเดิม แต่เอาวะใหม่ๆ สำหรับ Blog เกี่ยวกับ Library นี้ที่แรกในไทย(มั้งนะ) เข้าเรื่องกันดีกว่าจะได้ รับเขียนรีบไปปั่น เวบต่อ....

สำหรับการติดตั้ง jQuery นั้นไม่ได้มีอะไรยากเล้ย คือแค่ไปดาวน์โหลดมา จากเวบมันเองเท่านั้น

http://jQuery.com/

สำหรับตัวที่จะดาวน์โหลดมาเทสนั้นมี 3 ตัวเลือกตัวไหนก็ได้ตามวัตถุประสงค์ ซึ่งทางเค้าแจ้งไว้แล้ว

พอโหลดเสร็จการเรียกใช้ก็เหมือน Javascript ตามปกติ คือใส่ไว้ในช่วง head หรือ body

เอาละครับ อู้มาเป็นแรมเดือน ในที่สุดก็มีแรงฮึดขึ้นที่จะเริ่มต้น เขียน Blog ขึ้นมา ก็จะขอกล่าวกันก่อนว่าทำไม ถึงมาทำ Blog นี้ ?

คำตอบคือ ไม่มีอะไร คิดว่าอนาคต โดเมนนี้ขายได้แพง แน่ๆ เพราะตัว library ตัวนี้กำลังมาแรงในหมู่นักพัฒนาต่างประเทศ 555

ล้อเล่นน่ะครับ แต่ถ้ามีคนเสนอเกิน 20,000 บาทตอนนี้ ยินดีขาย ไม่แน่นาอีก 2 ปี อาจจะมีมูลค่ามากถึง $1M ก็ได้เหมือนโดเมน iphone ไง อิอิ เอ้า เข้าเรื่องกันดีกว่า ที่ทำมันขึ้นมาสาเหตุหลักจริงๆ ก็คือผมค่อนข้างชอบความสามารถของมัน จริงๆ ก่อนหน้านี้เคยลองหา library ประเภทนี้มาทีนึง ก็ไปเจอ prototype+scriptacolous มันก็ทำงานได้ดีนะ แต่พอไปอ่านข้อมูลมากๆ เข้าเลยรู้ว่า jQuery ทำงานได้ไวกว่า และมาแรงกว่า เลยลอยไปตามกระแส ซะหน่อย ....

ส่วน blog นี้ไม่ต้องห่วงครับ ว่าจะอ่านยากเย็น เพราะผมตั้งใจไว้แล้วว่าจะใช้ ภาษาง่ายๆ ที่ใครๆ ก็อ่านได้ไม่ ซีเรียส ดังนั้น นักพัฒนาบางคนที่เข้ามา อ่านอาจจะ งงๆ กับ ภาษาของผมซะหน่อย ก็อย่าว่ากันนะครับ 555