12 | มหัศจรรย์แห่งทูลทิป clueTip : A jQuery Plugin
คุณอ่านกันหรือยัง
ทูลทิปตัวนี้มันสุดยอดมากเลยครับท่าน คุณสมบัตินี่เพียบเลยครับ มีความยืดหยุ่นในการใช้งานสูง คุณต้องลองเล่นเดโมในเว็บเขาดูนะครับ แล้วจะเห็นจริง อย่างที่ผมพูด Online Demo
เอาละครับ วันนี้ผมคงจะไม่อธิบายทุกคุณสมบัติที่มันมีทั้งหมด แต่จะสอนวิธีใช้งานในเบื้องต้น ท่านจะนำไปต่อยอดได้ เริ่มเลยละกัน
ก่อนอื่นก็ต้องดาวน์โหลดตัว clueTip มาก่อน Download หลังจากที่ดาวน์โหลดมาแล้วก็แตกซิปออกนะครับ ในนั้นจะมีตัวอย่างให้ศึกษาด้วยครับ หลังจากนี้เราจะเริ่มเขียนโค้ดกันแล้ว
เริ่มต้นด้วยการ include ไฟล์ที่จำเป็นเข้ามาก่อน ทั้ง javascript และ css
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.hoverIntent.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.bgiframe.min.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" />
ในโฟลเดอร์ที่ดาวน์โหลดมา เขาไม่ได้ติดตัว jquery มาให้ด้วย เราเลยต้อง ไปเอามาจาก google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
โค้ด HTML ที่จะให้แสดงเป็น tooltip สิ่งสำคัญที่สุดก็คือ title=”ข้อความในไตเติล | เนื้อหาของทูลทิป” ตรงนี้แหละครับที่จะนำไปแสดงเป็นทูลทิป โดยจะแตกออกเป็น 2 ส่วน (|) ส่วนแรกจะนำไปทำไตเติล ส่วนทีสองแสดงเป็นเนื้อหา
<a class="cluetip" href="#" title="ข้อความในไตเติล | เนื้อหาของทูลทิป">?</a>
ขั้นตอนสุดท้าย เซ็ต HTML ของเราให้เป็น tooltip
<script type="text/javascript"> $(document).ready(function(){ $('a.cluetip').cluetip({splitTitle: '|'}); }) </script>
โค้ดทั้งหมดจะเป็นดังนี้
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.hoverIntent.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.bgiframe.min.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" /> <title>ClueTips</title> <script type="text/javascript"> $(document).ready(function(){ $('a.cluetip').cluetip({splitTitle: '|'}); }) </script> </head> <body> <a class="cluetip" href="#" title="ข้อความในไตเติล | เนื้อหาของทูลทิป">?</a> </body> </html>
ข้างล่างนี้จะเป็นวิธีการใช้งานแบบ Advance ขึ้นมาหน่อยนึง
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="cluetip/jquery.cluetip.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.hoverIntent.js"></script> <script type="text/javascript" src="cluetip/lib/jquery.bgiframe.min.js"></script> <link rel="stylesheet" href="cluetip/jquery.cluetip.css" /> <title>ClueTips</title> <script type="text/javascript"> $(document).ready(function(){ $('a.cluetip').cluetip({ splitTitle:'|', cluetipClass: 'jtip', arrows: true, dropShadow: true, hoverIntent: false, sticky: true, mouseOutClose: true, closePosition: 'title', closeText: 'close' }); }) </script> </head> <body> <a class="cluetip" href="#" title="ข้อความในไตเติล | เนื้อหาของทูลทิป">?</a> </body> </html>
ต้องขอบอกว่า ยังมีวิธีการใช้งานแบบซับซ้อน และพลิกแพลง ได้มากกว่านี้อีกมาก ซึ่งท่านคงต้องไปต่อยอดเอาที่เว็บ http://plugins.learningjquery.com/cluetip/ ถ้าผมจะเขียนให้ละเอียดยิบจริงๆ คาดว่าหน้านี้คงยาวไม่น้อยทีเดียว
ดาวน์โหลดโค้ดตัวอย่างในโพสต์นี้
แสดงความเห็น