23 | jQuery tab

January 2010 | By platoosom | jQuery | Tags : , , ,

ผมเชื่อว่าทุกคนรู้จักแน่นอน แต่อย่างไรก็ชมภาพกันเสียหน่อย ไม่เชื่ออย่าลบหลู่

jQuery tab

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>

Live Demo

บทความน่าสนใจ

  1. jQuery UI
  2. jQuery – Tabs plugin
  3. 9 ตัวอย่างการใช้งาน jquery
  4. jQuery .each เขาใช้กันยังไง
  5. มหัศจรรย์แห่งทูลทิป clueTip : A jQuery Plugin
Tags: , , ,

มี 5 ความเห็น ในบทความเรื่อง “jQuery tab”

  1. kai says:
    28/01/2010 at 22:08

    คือ มีคำถามค่ะ
    ตอนนี้เอา jquery 2 ตัวมาใช้  > “jquery lightbox” กับ “jqueryTab”
    ทีนี้ พอเราใส่ไปพร้อมกัน ปรากฎว่า  มันแสดงแค่เอฟเฟกเดียวง่ะ
    (โดยจะแสดงโค้ดอันที่ใส่หลังสุด  ก่อนขึ้น body)
    แต่ถ้าเราใส่เพียงโค้ดอย่างใดอย่างหนึ่ง  ปรากฎว่าสามารถทำงานได้ทั้ง “jquery lightbox” และ “jqueryTab”  แต่พอเอามารวมกันแล้วเกี่ยงงาน  ตัวที่โพสทีหลังทำงานอยู่โค้ดเดียว -  -
    ปัญหาคือ เราอยากให้มันแสดงผลได้ทั้งสองอัน   พอจะมีวิธีแนะนำหรือปล่าวเอ่ย?
    แบบอยากใช้ทั้งสองอัน  รักพี่เสียดายน้องอ่ะค่ะ ^ ^”?

  2. ilove says:
    14/02/2010 at 10:58

    เปิดใน chrome มันไม่ทำงานอ่ะคับ แต่เปิดใน ie และ ff มันทำงานได้ นี้เป็นเรื่องปกติใช่ไหมคับ

  3. platoosom says:
    15/02/2010 at 08:27

    ถือว่าปกติครับ โครมมันเพิ่งเกิดมาไม่นาน การซัพพอร์ตก็เลยอาจจะยังน้อยอยู่ แต่คาดว่าอนาคต ทาง jQuery เองน่าจะแก้ไขตรงจุดนี้ให้ดียิ่งขึ้นแน่นอนครับ

  4. J-com says:
    25/02/2010 at 05:58

    ตามที่คุณ (kai) ถาม
    ผมก๋เจอประมาณนั้นคือใช้ Mootools กับ jquery มันก็ทำแค่อันเดียวอีกอันก็ใช้ไม่ได้
    คือ ถ้าเอาอันใดอันหนึ่งออกก็ใช้ได้ตามปกติ

  5. platoosom says:
    25/02/2010 at 07:51

    ถ้าใช้งาน mootools กับ jquery ร่วมกันแล้วมีปัญหา นั่นเป็นเพราะว่า สองตัวนี้มันใช้สัญลักษณ์ $ เหมือนกัน

    วิธีแก้ง่ายๆคือ โค้ดของ jQuery ให้ท่านแทนสัญลักษณ์ $ ด้วยคำว่า jQuery ตัวอย่างการเขียน

    <script type="text/javascript">
jQuery(function() {
	jQuery("#tabs").tabs();
});
</script>

แสดงความเห็น

ชื่อ *
Email *
Website
ความคิดเห็น