ทูลทิป ไว้ใช้สำหรับแสดงคำอธิบายของอะไรสักอย่างที่อยู่บนหน้าเพจ แบบว่า พอเราเอาเมาส์ไปชี้ปุ๊บ มันก็จะแสดงคำอธิบายออกมาปั๊บ ไรเงี้ย ผมเองจะใช้มันประจำ เพราะบางครั้งหน้าเพจมันมีเนื้อที่จำกัด เลยต้องหาเทคนิคมาซ่อนรายละเอียดบางอย่างไว้ หรือบางทีผมก็ใช้สำหรับแสดงคำอธิบายวิธีป้อนข้อมูลในเท็กบ้อก ว่าคุณจะต้องใส่ข้อมูลรูปแบบไหน ตัวเลขอย่างเดียว หรือตัวหนังสือภาษาอังกฤษเท่านั้น เป็นต้น
ทูลทิปตัวที่ผมจะนำเสนอวันนี้ เป็นปลั๊กอินของ jQuery ซึ่งใช้งานง่ายมากๆ แค่ใช้คำสั่งไม่กี่บรรทัด เราก็จะได้ทูลทิป อันงดงามมาใช้ในเว็บของเรา เริ่มกันเลยดีกว่าครับ
1. ก่อนอื่นต้องดาวน์โหลด jtip มาก่อน Download
2. สร้างไฟล์ใหม่ แล้ว include jQuery และ jtip เข้ามา ดูพาธเอานะครับว่าผมเก็บไฟล์ไว้ยังไง
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtip.js" type="text/javascript"></script> |
3. include CSS เข้ามา
<link rel="stylesheet" href="css/global.css" /> |
4. สร้างทูลทิปเท็กให้กับสิ่งที่เราต้องการ โดยโครงสร้างจะเป็นดังนี้
<a href="ajax.htm?width=375" class="jTip" id="one">?</a> |
- ใช้แท็ก a คร่อมตัวที่จะให้เกิด tooltip
- href ชี้ไปยังไฟล์คำอธิบายที่ต้องการนำมาใส่ใน tooltip
- parameter width สำหรับกำหนดความขนาดกว้างของ tooltip ถ้าท่านต้องการให้ jtip คำณวนของมันเอง ท่านลบตัวนี้ทิ้งได้ครับ
- class จะต้องเป็น jTip
- id ต้องมี และถ้าท่านใช้ ทูลทิปหลายที่ใน 1 เพจ ให้กำหนดชื่อไม่ซ้ำกัน (ตั้งชื่อว่าอะไรก็ได้ ไม่ต้องสนใจ แค่ไม่ให้ซ้ำกันเป็นพอ)
โค้ดทั้งหมดจะเป็นดังนี้
<html> <head> <title>jTip - The Jquery Tool Tip</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtip.js" type="text/javascript"></script> <link rel="stylesheet" href="css/global.css" /> </head> <body> <a href="ajax.htm?width=375" class="jTip" id="one">?</a> </body> </html> |
ถ้าท่านต้องการให้ทูลทิปของท่านมีหัวด้วย ให้ใส่ name เข้าไปในแท็ก a
<a href="ajax.htm?width=375" class="jTip" id="one" name="นี่คือหัวของทูลทิปจ่ะ">?</a> |
accident attorney houston says:
18/02/2554 at 18/02/2554
Hi, outstanding job, only wasnt so bogged down with my research work Someone said your whole site. Thanks so much!