ตัวอย่างผลลัพธิ์
ดาวน์โหลด jQuery UI ได้ที่เว็บไซต์ http://jqueryui.com/หรือดาวน์โหลดได้ที่ คลิกที่นี่
แตกไฟล์ jquery-ui-1.7.2.custom.zip โฟลเดอร์ที่นำไปใช้มี โฟลเดอร์ css และ js
การเรียกใช้งาน jQuery UI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
1 2 3 4 5 6 7 8 9 10 | <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 แท็บ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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 โดยจะเป็นการเรียกไฟล์แทน
1 2 3 4 5 6 7 8 9 10 | <div id="tabs"> <ul> <li><a href="#tabs-1">หัวข้อแท็บที่ 1</a></li> <li><a href="">หัวข้อแท็บที่ 3</a></li> </ul> <div id="tabs-1"> <p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p> </div></div> |
