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

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

jQuery jquery plugin jQuery tab jQuery UI Live Demo
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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