GAJAX บทที่ 9

GHighlight สำหรับการทำ Highlight Element ด้วย Javascript การใช้งานก็คล้ายๆกับ GFader ละครับคือมี method เดียวแต่มี options ต่างกันเล็กน้อย

var highlighter= new GHighlight(el);

highlighter.play(options);

el คือ Element ที่ต้องการ ทำ Highlight ครับ สามารถใช้ ID name หรือ Node ก็ได้ครับ
options เป็นข้อมูลชนิด hash มี property ดังนี้
            from: ค่าสีเริ่มต้น สามารถกำหนดเป็น red green auto และยังสามารถกำหนดเองได้อีกด้วย (red)
            to: เหมือนกับ from (auto)
            speed: ความเร็วในการ เปลี่ยนแปลงสี (10)
            time: ช่วงห่างการเปลี่ยนแปลงสีเป็นขั้นๆจาก from ถึง to (20)
            onComplete: event เมื่อการทำงานสิ้นสุดแล้ว

หมายเหตุ * สีชมพูเป็นค่า default ครับ

ค่าสีที่กรอกให้กับ from และ to ปกติถ้าไม่กำหนด(ใช้ ค่า default) จะเป็นการ Highlight จากสีแดง ไปยังสีปัจจุบันของ Element ซึ่งเหมาะกับคำเตือนต่างๆ เช่นการกรอกฟอร์มผิดพลาด
สำหรับการกำหนดค่าสีแบบ กำหนดเอง จะต้องระบุค่าสีที่ต้องการ และ property ที่มีผลให้กับ from และ to ในลักษณะข้อมูล hash เช่น

to = {'borderColor':'#0000FF','backgroundColor':'#FFBFBF'};
ตัวอย่างการใช้งาน

new GHighlight ('element').play(); // สีแดง (default)

new GHighlight ('element').play({'from':'green'}); // สีเขียว

var prop = {

from: {'borderColor':'#FF0000','backgroundColor':'#FFFFFF'}, // เริ่มต้น

to: {'borderColor':'#0000FF','backgroundColor':'#EFEFEF'} // สุดท้าย

};

new GHighlight('highlight-demo').play(prop); // custom

ในตัวอย่างแบบ custom เป็นการกำหนดค่าสีเริ่มต้น และ สุดท้ายแบบกำหนดเอง โดยการเปลี่ยนสีกรอบ(borderColor) จาก แดง เป็นน้ำเงิน และ สีพื้น(backgroundColor) จาก ขาวเป็น เทา

ตัวอย่าง :