สลัดความขี้เกียจมาอัพเดทเรื่อง tab + ajax กันหน่อยดีกว่า

ช่วงนี้แวะไปเวบไหนๆ ก็เห็นคนทำ Tab+ajax เยอะแยะเลย เพราะว่ามันมีข้อดีของมันค่อนข้างเยอะคือ
1. ไม่เกะกะตา ไม่จำเป็นต้องโหลดมาทั้งหมด แสดงผล ยาวปื๊ดๆๆๆๆ
2. ลดการ load ลงเพราะว่า user สามารถเลือกได้ว่าอยากจะดูข้อมูลส่วนไหน แล้วค่อยๆ โหลดมาทีละส่วน
3. เวบดูมีลุกเล่น ขยับใกล้ 1.1 (ไม่ถึง 2 หรอก 555) เข้ามาอีกนิด
4. bla bla bla….

ส่วนตัวของ jQuery นั้นมี plugin เรื่อง tab ให้ใช้มากมายอยู่แล้ว อาทิเช่น….

http://www.stilbuero.de/jquery/tabs/#remote-tab-1

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






Try to click any tabs and wait for response


ตัวอย่าง
http://jquerytips.com/example/easytab/

สังเกตุได้ว่ามันมีโคดแค่ 3 ส่วนง่ายๆ คือ
1. html
2. css
3. Javascript (jQuery)

ลองเอาไปทำตามดูนะครับ รับรองไม่ยากๆ

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Comments »

 
 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>