adkdev // Just another web development blog

วันนี้ผมมี Javascript Effect มานำเสนออีกชิ้นหนึ่ง ชื่อว่า Effect.Tooltip ซึ่งใช้ Script.aculo.us เป็นฐาน ผู้เขียนคือ คุณ Nick Stakenburg ซึ่งวิธีการเรียกใช้ ก็จะคล้ายการเรียกใช้ effect ของ scriptaculous ทั้วไป

การจะใช้ effect ตัวนี้ต้องการ Prototype.js และ Script.aculo.us ซึ่งสามารถดาวโหลดได้จากลิงค์ แล้วก็ดาวโหลดไฟล์ Effect ครับ

วิธีการเรียกใช้ก็เป็นดังนี้ :
new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});

โดยที่
element คือ id ของ object ที่เรากำหนดที่จะให้ tooltip แสดง (ในภาพจะเป็น Tooltip 1-3)
content คือ ข้อความที่จะแสดง (ในภาพคือ Set ud perspiciatis….)
title คือ ข้อความที่จะให้เป็น title (ซึ่งจะกำหนดหรือไม่ก็ได้ และในภาพจะเป็น Lorem Ipsum)
className: ‘class’ คือชื่อคลาสที่จะให้แสดง โดยใส่ชื่อคลาสไปใน ” และกำหนดคลาสใน css
offset: {x:0, y:0} คือ ส่วนกำหนดการแสดงผล กำหนดในแกน x,y (ซึ่งจะกำหนดหรือไม่ก็ได้)

ภาพตัวอย่างการใช้งานจากเว็บไซต์ผู้จัดทำ

การเซ็ตค่าของ tooltip จะกำหนดตอนโหลดหน้าเว็บเพจ window.onload = function () { new Effect.Tooltip(….);}
หรือจะใช้ function ของ prototype ที่มีมาให้ก็จะเป็น Event.observe(window, ‘load’, function_name, false);
function function_name() { new Effect.Tooltip(…); }

สามารถดูตัวอย่างได้ที่เว็บไซต์ผู้จัดทำครับ หรือถ้าอยากรู้วิธี ก็ view source หน้าตัวอย่างดูก็ได้ครับ (คงไม่ผิดกฏหมายมั้ง *-*)