ผมเชื่อว่าทุกคนรู้จักแน่นอน แต่อย่างไรก็ชมภาพกันเสียหน่อย ไม่เชื่ออย่าลบหลู่
jQuery tab ตัวนี้เป็นปลั๊กอินของ jQuery ที่อยู่ในกลุ่มของ jQuery UI ความง่ายในการใช้งานนั้นไม่ต้องพูดถึง แค่สร้าง html ให้เป็นไปตามโครงสร้างที่เขาแจ้งไว้ กับแค่ .tab() อีกกระทอกเดียว อยู่หมัด
งดงามล้ำเลิศ อีกทั้งยังสามารถเปลี่ยนธีมไปเป็นแบบที่ต้องการได้อีกอย่างไร้ขีดจำกัด
เรามาดูกันดีกว่าครับว่า การสร้างแท็บขึ้นมาใช้งานในเว็บเราสักตัว เหมือนที่เว็บดังๆเขามักนิยมทำกันตอนนี้ นั้นมันง่ายสัดๆ แค่ไหน
อ้อขอกล่าวไว้ก่อนว่า ผมจะไม่ดาวน์โหลดทั้งตัว jQuery และ jQuery UI มาไว้ที่เครื่องนะ ผมจะดูดโดยตรงมาจาก CDN ของ google
รายละเอียดอย่างละเอียด สามารถอ่านได้ที่ ใช้ jQuery และ UI โดยไม่ต้องโหลดมาเก็บในเครื่อง
1. อินคลูดไฟล์ที่จำเป็นเข้ามา
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-th.js"></script> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" /> |
2. โครงสร้างแท็บจะเป็นอย่างนี้
<div id="tabs"> <ul> <li><a href="#tabs-1">แท็บ #1</a></li> <li><a href="#tabs-2">แท็บ #2</a></li> <li><a href="#tabs-3">แท็บ #3</a></li> </ul> <div id="tabs-1"> เนื้อหาเท็บที่ 1 </div> <div id="tabs-2"> เนื้อหาเท็บที่ 2 </div> <div id="tabs-3"> เนื้อหาเท็บที่ 3 </div> </div> |
ท่านสังเกตให้ดีนะครับ หัวของแท็บตรงที่ให้เราคลิกแล้วมันจะเปลี่ยนเนื้อหาน่ะ มันจะอยู่ภายใต้โครงสร้าง ul และภายใน li แต่ละตัว หมายถึงแท็บ 1 อัน จำนวนของ li จะต้องเท่ากับ div ที่อยู่ด้านล่างมัน และในแท็ก li จะมีลิ้งก์ด้วย ที่ชี้มายัง div ที่เก็บเนื้อหา
3. เนรมิตให้มันเป็นแท็บ ด้วย jQuery UI
<script type="text/javascript"> $(function() { $("#tabs").tabs(); }); </script> |
ง่ายเหลือแสน
โค้ดทั้งหมด เป็นดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-th.js"></script> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" /> <title>jQuery UI tab</title> <script type="text/javascript"> $(function() { $("#tabs").tabs(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">แท็บ #1</a></li> <li><a href="#tabs-2">แท็บ #2</a></li> <li><a href="#tabs-3">แท็บ #3</a></li> </ul> <div id="tabs-1"> เนื้อหาเท็บที่ 1 </div> <div id="tabs-2"> เนื้อหาเท็บที่ 2 </div> <div id="tabs-3"> เนื้อหาเท็บที่ 3 </div> </div> </body> </html> |
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
