jQuery – Tabs plugin
ดูตัวอย่าง : demo
สิ่งที่ต้องใช้ :
1. jquery-1.2.6
2. jquery.ui
หลังจาก ได้ดาวน์โหลดสิ่งที่กล่าวมาทั้งหมดแล้ว ก็ถึงคราวจะต้องเขียนโค้ดแล้วล่ะ (จะไม่บอกนะครับว่า สร้างไฟล์ตัวอย่างมาสักไฟล์)
1. include jquery กับ jquery.ui เข้ามา
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2/jquery-ui-personalized-1.6rc2.min.js"></script>
2. include themes เข้ามา
<link rel="stylesheet" type="text/css" href="js/jquery-ui-themeroller/jquery-ui-themeroller.css"/>
3. สร้างโครงสร้างของ แท็บ ด้วยโค้ด HTML ใส่เข้าไปในส่วน <body> เมื่อเราดูที่โค้ดจะเห็นว่า มี <div> ที่มี id ว่า tabs ครอบส่วนทั้งหมดไว้ แล้วก็มีแท็ก <ul> แสดงส่วนของตัวแท็บ และ มี <div> เล็กๆอยู่เท่ากับจำนวนของ <li> และ href="#fragment-1" จะมีความสัมพันธ์กับ id ของ <div> ขนาดเล็กที่อยู่ด้านล่างมัน
<div id="tabs"> <ul> <li><a href="#fragment-1"><span>First Section</span></a></li> <li><a href="#fragment-2"><span>Second Section</span></a></li> <li><a href="#fragment-3"><span>Third Section</span></a></li> </ul> <div id="fragment-1"> <p>เนื้อหาแท็บที่ 1</p> </div> <div id="fragment-2"> <p>เนื้อหาแท็บที่ 2</p> </div> <div id="fragment-3"> <p>เนื้อหาแท็บที่ 3</p> </div> </div>
4. ใส่โค้ด javasctipt เข้าไปในส่วน <head>
<script type="text/javascript">$(document).ready(function(){ $("#tabs").tabs();})</script>
เพียงเท่านี้ท่านก็จะมี แท็บอันสวยงามใช้ในเว็บแล้วล่ะครับ
โค้ดทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2/jquery-ui-personalized-1.6rc2.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui-themeroller/jquery-ui-themeroller.css" /> <script type="text/javascript"> $(document).ready(function(){ $("#tabs").tabs(); }) </script> <title>Tabs Example</title> </head> <body> <div id="tabs"> <ul> <li><a href="#fragment-1"><span>First Section</span></a></li> <li><a href="#fragment-2"><span>Second Section</span></a></li> <li><a href="#fragment-3"><span>Third Section</span></a></li> </ul> <div id="fragment-1"> <p>เนื้อหาแท็บที่ 1</p> </div> <div id="fragment-2"> <p>เนื้อหาแท็บที่ 2</p> </div> <div id="fragment-3"> <p>เนื้อหาแท็บที่ 3</p> </div> </div> </body> </html> |
แสดงความเห็น