Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

การใช้ DIV สร้างเลเยอร์ ตอนที่ 3 : สร้างฟังก์ชั่น moveTo() และ moveBy()

โดย สรวุฒิ กอสุวรรณศิริ

สำหรับบทความนี้เป็นตอนที่ 3 ของเรื่องการใช้ DIV สร้างเลเยอร์แล้วนะครับ ในตอนนี้ ผมจะสร้างฟังก์ชั่นขึ้นมา 2 ฟังก์ชั่นสำหรับใช้เคลื่อนย้าย Layer เพื่อให้ เราสามารถใช้งาน Layer ได้สะดวกยิ่งขึ้น สำหรับฟังก์ชั่น moveTo() ที่ผมจะสร้าง ผมต้องการให้มี รูปแบบการใช้ดังนี้ครับ

moveTo(objName,x,y)

โดยที่
objName เป็นตัวแปรพ้อยเตอร์ที่ชี้ Layer นั้นอยู่
x และ y เป็นตำแหน่งที่ต้องการย้าย layer ไป

หลังจากที่ผมคิดๆเขียนๆอยู่สักพัก ผมก็เขียนฟังก์ชั่นได้แบบนี้ แค่กำหนด Properties Left และ Top ของ เลเยอร์ที่ตัวแปรพ้อยเตอร์ชี้อยู่เท่านั้นเอง ช่างง่ายจริงๆ แต่อย่าลืมนะครับ เวลาจะเรียกใช้ฟังก์ชั่นนี้ obj จะต้องเป็นตัวแปรพ้อยเตอร์ที่ชี้อ็อบเจกต์ถูกต้องตามชนิดของเบราเซอร์นะครับ

function moveTo(obj,x,y) { obj.left = x; obj.top = y; }

เอ มันง่ายไปหน่อยหรือเปล่า 2 บรรทัดเอง เอางี้ เรามาลองดูกันว่า ถ้าผมจะเขียน Function moveTo() ใหม่ โดยที่ไม่ต้องใช้ตัวแปรพ้อยเตอร์ แต่ส่ง id ที่ระบุในแท็ก <DIV> เข้าไปแทน จะทำอย่างไร ยังจำการติดต่อกับ อ็อบเจกต์ Layer ในตอนที่ 1 ได้ไหมครับ รายังมีวิธีการอ้างถึง Layer แบบนี้อยู่

document.all["myDiv"].style.ชื่อProperties (สำหรับ IE)
document.layers["myDiv"].ชื่อProperties (สำหรับ Netscape)

คราวนี้ผมจะเขียน moveTo() โดยใช้การอ้างอิงอ็อบเจกต์วิธีนี้นะครับ แต่ต้องเพิ่มส่วนตรวจสอบเบราเซอร์ลงไปด้วย เพื่อให้ฟังก์ชั่นนี้ทำงานได้ทั้งใน IE และ Netscape function moveTo(obj,x,y) { if (ns4) { document.layers[obj].left = x; document.layers[obj].top = y; } if (ie4) { document.all[obj].style.left = x; document.all[obj].style.top = y; } } อืมมม ก็ยังง่ายอยู่ใช่ไหมครับ ดูปุ๊ปก็เข้าใจได้ทันที ก็มันแค่เช็คเบราเซอร์แล้วกำหนดค่าลงไปเท่านั้นเองนี่นา ไม่ได้มีอะไรซับซ้อนเลย แต่คราวนี้ผมจะเอาฟังก์ชั่นทั้ง 2 แบบมารวมกันเป็นตัวเดียว แล้วเรียกใช้ได้ทั้ง 2 วิธีเลย เพื่อให้ฟังก์ชั่น moveTo() มีความยืดหยุ่นมากขึ้น สามารถเรียกใช้ได้ทั้ง 2 วิธี แต่จะทำอย่างไรล่ะ ปัญหาใหญ่ก็คือ เราจะต้องเขียนฟังก์ชั่นเพียงฟังก์ชั่นเดียว ให้รับข้อมูล obj ได้ 2 แบบ 2 ชนิดแบบทูอินวัน คือ จะรับเป็นตัวแปรพ้อยเตอร์ก็ได้ หรือจะรับเป็นชื่อ id ของเลเยอร์ก็ได้ ... ไม่ต้องกังวลครับ ที่จริงใช้เทคนิกง่ายๆ คือเช็ค ตัวแปรก่อนว่า เป็นตัวแปรชนิดใด แล้วค่อยแยกกันไปทำงานตามชนิดที่ตรวจสอบได้ ซึ่งวิธีการตรวจสอบ ก็ง่ายนิดเดียว และมี 108-1009 วิธีด้วยซ้ำ สำหรับผม ผมใช้วิธีนี้ครับ ตรวจสอบว่า obj มีพรอเพอร์ตี left หรือไม่ ถ้ามี ก็แปลว่ามันคือ layer ชัวร์ๆ 100% ลองดูฟังก์ชั่น moveTo() เวอร์ชั่นทูอินวันนะครับ function moveTo(obj,x,y) { if (obj.left) { obj.left = x; obj.top = y; } else { if (ns4) { document.layers[obj].left = x; document.layers[obj].top = y; } if (ie4) { document.all[obj].style.left = x; document.all[obj].style.top = y; } } } ที่นี้เราก็จะได้ฟังก์ชั่น moveTo() เอาไว้เปลี่ยนตำแหน่งของ Layer แล้วนะครับ แถมมีความยืดหยุ่นสูง สามารถเรียกใช้ ได้ 2 แบบอีกตะหาก จ้าบจริงๆเลย ส่วนตัวอย่างการนำไปใช้ ดูในไฟล์ตัวอย่างได้เลยครับผม [moveto_sample.html]

ฟังก์ชั่น moveBy()

ฟังก์ชั่นนี้เป็นอีกฟังก์ชั่นหนึ่งที่คุณควรจะมีไว้ใช้ มันเอาไว้เปลี่ยนตำแหน่งเลเยอร์เช่นดียวกับ moveTo() แต่ moveBy() จะใช้คลื่อนไปตามระยะทางที่กำหนด เช่น ถ้า myelement มีตำแหน่งเดิมอยู่ที่ (100,100) แล้วสั่ง moveBy(myelement,10,10) ตำแหน่งใหม่ของมันจะเป็น (110,110) ดังนั้น การทำงานของฟังก์ชั่น moveBy() จะต้องอ่านค่าตำแหน่งเดิมของ เลเยอร์ด้วย เพื่อคำนวนหาตำแหน่งใหม่ที่ต้องการเคลื่อนไป การอ่านค่าที่ผมเคยอธิบาย ไปแล้วในตอนที่ 2 มีรูปแบบดังนี้ครับ

parseInt(myelement.left)
parseInt(myelement.top)

เมื่อนำมาเขียนเป็นฟังก์ชั่น ซึ่งผมจะขอลัดไปเป็นเวอร์ชั่นทูอินวันเลย จะเป็นแบบนี้ครับ function moveBy(obj,x,y) { if (obj.left) { obj.left = parseInt(obj.left)+x; obj.top = parseInt(obj.top)+y; } else { if (ns4) { document.layers[obj].left = parseInt(document.layers[obj].left)+x; document.layers[obj].top = parseInt(document.layers[obj].top)+y; } if (ie4) { document.all[obj].style.left = parseInt(document.all[obj].style.left)+x; document.all[obj].style.top = parseInt(document.all[obj].style.top)+y; } } }

และนี่เป็นไฟล์ตัวอย่างการใช้ครับ คลิกไปดูได้เลย [moveby_sample.html]

Back to top





© copyright 2001 Sorrawut Korsuwansiri