PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

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

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



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

รายละเอียดย่อยหัวข้อแท็บที่ 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>






Tags:: jqueryui เมนู tab






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


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