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

การใช้ DIV สร้างเลเยอร์ ตอนที่ 6 : การเปลี่ยนแปลงข้อมูลในเลเยอร์

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

แล้วก็มาถึงตอนที่ 6 ซึ่งผมคิดว่าคงจะเป็นตอนสุดท้าย สำหรับบทความในซีรีส์นี้แล้วนะครับ ในบทความตอนนี้จะเป็นวิธีการใช้ JavaScript เปลี่ยนแปลงแก้ไขเนื้อหาที่อยู่ใน Layer ซึ่งก็เป็นสิ่งสำคัญเหมือนกันนะ อย่างเช่น ถ้าคุณจะทำ Rollover โดยใช้ตัวอักษร หรือจะทำเมนูแบบทรี ก็สามารถนำเทคนิคนี้ไปประยุกต์ใช้ได้เช่นกัน ชักสนใจแล้วใช่ไหมครับ มาดูกันเลยดีกว่า

การเปลี่ยนแปลงข้อมูลในเลเยอร์ใน IE

ใน IE จะถือว่าเนื้อหาของเลเยอร์จะถูกเก็บอยู่ใน พรอเพอร์ตี innerHTML ดังนั้น การแปลี่ยนแปลงแก้ไขข้อมูลในเลเยอร์ ก็ทำได้โดยการกำหนดค่าใหม่ให้กับ innerHTML นั่นเอง ตัวอย่าง

document.all.divID.innerHTML = "ข้อมูลใหม่ของคุณ";

หรือแบบนี้ก็ได้

document.all["divID"].innerHTML = "ข้อมูลใหม่ของคุณ"

โดยที่ divID เป็นชื่อเลเยอร์ ง่ายไหมครับ ทีนี้มาดูทาง Netscape กันบ้าง ง่ายเหมือนกัน แต่วิธีการทำไม่เหมือนกันครับ

การเปลี่ยนแปลงข้อมูลในเลเยอร์ใน Netscape

เนื่องจาก Netscape ถือว่าข้อมูลในเลเยอร์ เป็น document ดังนั้นเราก็ต้องใช้ วิธีการเปลี่ยนแปลงแก้ไขข้อมูลแบบ document เหมือนกับ document ของ window นั่นแหละครับ สำหรับการเขียนข้อมูลลงใน document มีรูปแบบดังนี้ครับ

document.open()
document.write("ข้อมูลของคุณ")
document.close()

แต่ที่เราสนใจ คือ document ของเลเยอร์ จึงต้องเติมข้างหน้าเข้าไปหน่อย เพื่อให้รู้ว่าเป็นเลเยอร์ไหน

document.layers["divID"].document.open()
document.layers["divID"].document.write("ข้อมูลของคุณ")
document.layers["divID"].document.close()

เห็นไหมครับ ง่ายนิดเดียวเอง

ฟังก์ชั่นแก้ไขข้อมูลในเลเยอร์

ทีนี้ ผมจะนำความรู้เรื่องนี้มาเขียนเป็นฟังก์ชั่น เพื่อให้การเขียนโปรแกรมครั้งต่อไปง่ายขึ้น คือไม่ต้องเขียนโปรแกรม 2 รอบเพื่อให้ใช้งานได้ใน 2 Browser เพราะฟังก์ชั่นนี้จะแยกทำงาน ตาม browser ให้เองครับ

function layerWrite(id,text) {
if (ns4) {
var docPtr = document.layers[id].document;
docPtr.open()
docPtr.write(text)
docPtr.close()
}
else if (ie4) document.all[id].innerHTML = text
}

แต่อย่าลืมนะครับ ตัวแปร ns4 และ ie4 ต้องผ่านการกำหนดค่าจาก 2 บรรทัดนี้ก่อนนะครับ

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

ฟังก์ชั่นนี้ดูเหมือนจะนำไปใช้ได้แล้ว แต่มันยังไม่สมบูรณ์ครับ เพราะมันยังไม่สามารถกำหนดค่าให้กับเลเยอร์ที่ซ้อนในเลเยอร์ได้ เพราะฉะนั้น เราจะต้องพัฒนามันต่อ ให้มีการรับพารามิเตอร์เพิ่มอีกตัวหนึ่ง เป็น parentLayer ของเลเยอร์ที่จะแก้ไข แต่ก็มีเรื่องน่าปวดหัวอีก เพราะ parentLayer ก็สามารถเป็น childLayer ของเลเยอร์อื่นได้เหมือนกัน (กรณีที่มีเลเยอร์ซ้อนกัน 3 ชั้นไงครับ) อ้าว !! ตกลงต้องรับพารามิเตอร์มาเป็น parentLayer กี่ตัวล่ะเนี่ย ไม่ต้องตกใจไปครับ รับตัวเดียวก็พอ วิธีของผมคือ รับเข้ามาเป็น String แล้วตัดข้อความโดยใช้เครื่องหมายจุด (.) เป็นตัวแบ่ง หลังจากนั้นก็คำนวน String ที่ใช้อ้างอิงออกมา แล้วแปลงเป็นอ็อบเจกต์ด้วยฟังก์ชั่น eval() ทั้งหมดนี้คือการทำงานของโค้ดข้างล่างครับ ลองไล่ดูนะ อาจจะยากสักหน่อย แต่คงไม่เกินความสามารถชาวเรียลเดฟใช่ไหมครับ

function layerWrite(id,nestref,text) {
if (ns4) {
if (nestref)
{
var ParentLayerArr = nestref.split('.')
var refStr='document';
for (i=0;i {
refStr+='.'+ParentLayerArr[i]+'.document';
}
}
var obj = (nestref)? eval(refStr+'.'+id+'.document') : document.layers[id].document
obj.open()
obj.write(text)
obj.close()
}
else if (ie4) document.all[id].innerHTML = text
}

ไฟล์ตัวอย่างการเปลี่ยนแปลงข้อมูลในเลเยอร์โดยใช้ฟังก์ชั่น layerWrite() ครับ [คลิกไปดูได้เลย]

Back to top





© copyright 2001 Sorrawut Korsuwansiri