สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI
เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdeetab jqueryui เมนู
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ tab jqueryui เมนู
ไปที่
Copy
ตัวอย่างผลลัพธิ์
รายละเอียดย่อยหัวข้อแท็บที่ 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()