BiRDXCiTE Blog

มาลองทำ Ajax Tabs Content แบบง่ายๆกันดีกว่า

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

เจอโค้ดตัวหนึ่ง ซึ่งเราไม่ต้องมาเขียนเองเลย เพียงแต่ลองมาปรับแต่งนิดหน่อยเท่านั้น เราก็ได้ Ajax Tabs Content เท่ๆ เหมือนคนอื่นเค้าแล้ว…เอาล่ะครับ เรามาเข้าเรื่องเลยดีกว่า Ajax Tabs Content ก็คือ ไอ้แถบๆ ที่เห็นตามหน้าเว็บ sanook.com อะครับ ที่มีแถบหลายๆแถบรวมพวกข่าวสารต่างๆ หลายๆคนอาจไม่เหนภาพ ลองเข้าไปดูเองนะครับ ส่วนวิธีทำนั้น ไม่ยากเลย ผมไปเจอมาเว็บหนึ่ง เขาทำโค้ดสำเร็จรูปมาให้เราแล้ว เพียงเราเอาไปประยุกต์เองเท่านั้นครับ แหล่มเลย ไม่พูดมากละ มาลองทำกนเลยดีกว่า

ก่อนอื่น ขอให้เข้าไปที่เว็บ http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ จะเห็นว่า ภาษาปะกิตล้วนๆ มะต้องตกจาย - - ลองไล่ลงมาจะเหนไอ้แถบๆที่ผมว่า ให้กด ajaxtapconntent.zip เพื่อดาวนน์โหลด โค้ดมันมาเลย เส็จแล้วก็ แตกไฟล์ เราจะได้ไฟล์หลักๆมาก ประมาณ 10 ไฟล์มั้ง ก็จะมี

• demo.htm
• ajaxtabs.css
• ajaxtabs.js
• loading.gif
• shade.gif
• shadeactive.gif
• Demo files: external.htm, external2.htm, external3.htm, external4.htm

ตามนั้นครับ ซึ่งวิธีใช้ไม่ยากเลย อย่างแรก ลองกดไฟล์ demo.html ดูก่อน ซึ่งจะเห็น Ajax Tab ของเรานั่นเอง เค้าทำขึ้นมาเพื่อให้เราเข้าใจวิธีใช้ของมัน หากเราต้องการนำไปใช้กับเว็บของเราก็ง่ายๆครับ เพียงแค่ เปลี่ยนชื่อโฟลเดอร์ของเรา ที่ดาวน์โหลดมา เปนชื่อ ajaxtab ก็ได้ครับสั้นๆ จากนั้น อัพโฟลเดอร์นี้ ขึ้นไปอยู่ที่เดียวกับที่หน้าเพจเราอยู่ จากนั้น ให้แก้ไขหน้าเพจของเราโดยการ

เรียกไฟล์ ajaxtabs.js ขึ้นมาโดยใช้แท็ก <script type=”text/javascript” src=”ajaxtabs/ajaxtabs.js” mce_src=”ajaxtabs/ajaxtabs.js”></script> ตรง head ครับ
(กำหนดพาธให้ถูกด้วยนะว่าเรียกมาจากโฟลเดอร์อะไร)

จากนั้น เพิ่มแท็กนี้ลงไป ที่เดียวกัน <link rel=”stylesheet” type=”text/css” href=”ajaxtabs/ajaxtabs.css” mce_href=”ajaxtabs/ajaxtabs.css” /> เพื่อเรียก css มาคุมเพื่อความสวยงาม
(กำหนดพาธให้ถูกด้วยนะว่าเรียกมาจากโฟลเดอร์อะไร)

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

<ul id=”maintab” class=”shadetabs”>
<li class=”selected”><a href=”#default” mce_href=”#default” rel=”ajaxcontentarea”>Intro</a></li>
<li><a href=”external.htm” mce_href=”external.htm” rel=”ajaxcontentarea”>News</a></li>
<li><a href=”external2.htm” mce_href=”external2.htm” rel=”ajaxcontentarea”>Dog</a></li>
<li><a href=”external3.htm” mce_href=”external3.htm” rel=”ajaxcontentarea”>Cat</a></li>
<li><a href=”external4.htm” mce_href=”external4.htm” rel=”ajaxcontentarea”>Sea Otter</a></li>
</ul>

<div id=”ajaxcontentarea” class=”contentstyle”>
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
<p><b><a href=”javascript: expandtab(’maintab’, 2)”>Select 3rd tab of “maintab”</a></b></p>
</div>

<script type=”text/javascript”>
//Start Ajax tabs script for UL with id=”maintab” Separate multiple ids each with a comma.
startajaxtabs(”maintab”)
</script>

เท่านี้ละครับ เราก็จะได้ Ajax Tab สมใจอยากแล้ว ลองปรับเปลี่ยนกันเอาเองนะครับไม่ยากเลย
ที่มา : http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/