สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI

19 August 2009 By Ninenik Narkdee
เมนู jqueryui tab

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เมนู jqueryui tab



ตัวอย่างผลลัพธิ์

รายละเอียดย่อยหัวข้อแท็บที่ 1

รายละเอียดย่อยหัวข้อแท็บที่ 2

รายละเอียดย่อยหัวข้อแท็บที่ 3



ดาวน์โหลด jQuery UI ได้ที่เว็บไซต์ http://jqueryui.com/หรือดาวน์โหลดได้ที่ คลิกที่นี่

แตกไฟล์ jquery-ui-1.7.2.custom.zip โฟลเดอร์ที่นำไปใช้มี โฟลเดอร์ css และ js

การเรียกใช้งาน jQuery UI

<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
	// แทรกโค้ต jquery
	// กำหนดแบบทั่วไป
	$("#tabs").tabs(); 

	// กำหนดแบบเลื่อนหัวข้อซ้าย ขวาได้
	//	$("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
	
	// กำหนดแบบให้ซ่อนรายละเอียด เมื่อคลิกที่หัวข้อแท็บซ้ำ
	// $("#tabs").tabs({collapsible: true});

	 // กำหนดให้แสดงรายละเอียดเมื่อนำเมาท์มาอยู่เหนือหัวข้อแท็บ
	 // $("#tabs").tabs({event: 'mouseover'});
});
</script>

CSS code กำหนดขนาดตัวอักษรของข้อความใน แท็บ tabs

<style type="text/css">
/* ปรับขนาดตัวอักษรของข้อความใน tabs 
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs
ในไฟล์ css/smoothness/jquery-ui-1.7.2.custom.css หัวข้อ tabs
*/
.ui-tabs{
	font-family:tahoma;
	font-size:11px;
}
</style>

HTML code สำหรับกำหนด tabs แท็บ

<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">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>
	</div>
	<div id="tabs-2">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 2</p>
	</div>
	<div id="tabs-3">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 3</p>
	</div>
</div>

สามารถกำหนดแท็บแบบเรียกไฟล์ โดยใส่ url ที่ link ในหัวข้อแท็บ
ตัวอย่าง code ข้างล่างจะไม่มีแท็บ div ของแท็บ ที่ 2 และ 3 โดยจะเป็นการเรียกไฟล์แทน

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">หัวข้อแท็บที่ 1</a></li>
		<li><a href="http://www.google.com">หัวข้อแท็บที่ 2</a></li>
		<li><a href="">หัวข้อแท็บที่ 3</a></li>
	</ul>
	<div id="tabs-1">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>
	</div>
</div>


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: tab jqueryui เมนู







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ