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


   

การใช้ DIV สร้างเลเยอร์ ตอนที่ 2 : ซ่อน/แสดง และการเคลื่อนย้ายตำแหน่ง

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

เราได้เรียนรู้วิธีการวางเลเยอร์ด้วย <DIV> ในเอกสารและวิธีการติดต่อกับมันด้วย JavaScript กันแล้วในตอนที่ 1 นะครับ สำหรับตอนที่ 2 นี้เราก็จะมาเรียนรู้ Properties เพิ่มเติมอีก 2-3 ตัว ที่ ใช้ในการซ่อน การแสดงเลเยอร์ และการเคลื่อนย้ายตำแหน่งของมันกันนะครับ

การซ่อน และ การแสดง

Properties ที่ใช้ในการควบคุมการซ่อนและการแสดง Layer ทั้งใน Netscape และ IE ใช้ตัวเดียวกันครับ คือ visibility แต่ค่าที่ใช้นั้นไม่เหมือนกันนะครับ ใน Netscape จะใช้ค่าเป็น "hide" และ "show" ส่วนใน IE จะใช้แตกต่างกันคือ "hidden" และ "visible"

ดังนั้น คำสั่งที่ใช้ในการซ่อน Layer ใน Netscape จึงเป็น

document.divName.visibility = "hide"

และใช้คำสั่งนี้ในการแสดงครับ

document.divName.visibility = "show"

ส่วนใน IE ก็จะเป็นแบบนี้

divName.style.visibility = "hidden"

และ

divName.style.visibility = "visible"

ฟังก์ชั่น สำหรับการซ่อนแสดง ที่สนับสนุนทั้ง 2 Browser แบบที่ 1

ทีนี้ผมจะนำคำสั่งสำหรับ Browser ทั้ง 2 มาเขียนรวมกันเป็นฟังก์ชั่น Show() และ Hide() เพื่อให้ฟังก์ชั่นนี้ใช้ได้กับทั้ง IE และ Netscape โดยผมจะนำความรู้เรื่องตัวแปรพ้อยเตอร์ ที่เคยอธิบายไปในตอนที่ 1 มาใช้ด้วย หน้าตาของฟังก์ชั่นทั้ง 2 เป็นแบบนี้ครับ function show(obj) { if (ns4) obj.visibility = "show" else if (ie4) obj.visibility = "visible" } function hide(obj) { if (ns4) obj.visibility = "hide" else if (ie4) obj.visibility = "hidden" }

วิธีการเรียกใช้

show(objectName)

และ

hide(objectName)

ซึ่ง objectName ต้องเป็นตัวแปร Pointer ที่เราชี้ไปที่ DIV แล้วนะครับ ต่อไปนี้เป็นตัวอย่างการใช้ Function show() และ hide() ขอให้สังเกตตอนที่ผมเรียกใช้ Function นะครับ ผมจะใส่ชื่อตัวแปรพ้อยเตอร์ลงไป ลองอ่านดูนะครับ ไม่ยากอะไรเลย

<html> <head> <title>RealDev.net - การซ่อนและการแสดง Layer</title> <script language="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) myDivPtr = document.myDiv if (ie4) myDivPtr = myDiv.style } // Show/Hide functions for pointer objects function show(obj) { if (ns4) obj.visibility = "show" else if (ie4) obj.visibility = "visible" } function hide(obj) { if (ns4) obj.visibility = "hide" else if (ie4) obj.visibility = "hidden" } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" onLoad="init()"> <A HREF="javascript:show(myDivPtr)">show</A> - <A HREF="javascript:hide(myDivPtr)">hide</A> <DIV ID="myDiv" STYLE=" position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red;"> </DIV> </BODY> </HTML>

ฟังก์ชั่น สำหรับการซ่อนแสดง ที่สนับสนุนทั้ง 2 Browser แบบที่ 2

ทีนี้ ถ้าเราต้องการเขียนฟังก์ชั่นที่ใช้ ซ่อน/แสดง แบบธรรมดา โดยที่ไม่ต้องใช้ตัวแปรพ้อยเตอร์ แต่ใช้เป็นชื่อของ id ที่เป็น String แทน จะทำอย่างไร .... ยังจำได้ไหมครับ วิธีการอ้างถึง อ็อบเจกต์ในรูปแบบ document.all["myDiv"].style.ชื่อProperties (ใน IE) และ document.layers["myDiv"].ชื่อProperties (ใน Netscape) คงเดากันออกแล้วใช่ไหมครับ ว่าผมจะเขียนฟังก์ชั่นนี้อย่างไร // Show/Hide functions for non-pointer layer/objects function show(id) { if (ns4) document.layers[id].visibility = "show" else if (ie4) document.all[id].style.visibility = "visible" } function hide(id) { if (ns4) document.layers[id].visibility = "hide" else if (ie4) document.all[id].style.visibility = "hidden" }

การเรียกใช้ฟังก์ชั่น show() และ hide แบบที่ 2 ก็สามารถใส่ชื่อ id ของ DIV ลงไปได้เลย ไม่ต้องใช้ตัวแปรพ้อยเตอร์

show('DivName');
hide('DivName');

ที่ผมสอน 2 วิธีก็เพื่อให้ท่านผู้อ่านได้รู้ไว้ จะได้เลือกใช้ได้ตามความสะดวกในแต่ละสถานการณ์นะครับ

การเคลื่อนย้ายตำแหน่ง

Properties ที่เกี่ยวข้องกับตำแหน่งของ Layer มีอยู่ 2 ตัวครับ คือ top และ left หากเราจะย้าย Layer ไปที่ตำแหน่งไหนก็แค่กำหนด ตำแหน่งลงไปใน Properties 2 ตัวนี้ได้เลย เช่น

myelement.left = 100
myelement.top = 50

แต่ myelement จะต้องเป็นตัวแปรพ้อยเตอร์นะครับ

function init() {
if (ns4) myelement = document.myelementDiv
if (ie4) myelement = myelementDiv.style
}

สำหรับการอ่านค่าจาก Properties นี้ มีข้อควรระวังอยู่นิดนึง

สมมุติว่า Layer อยู่ที่ตำแหน่ง (200,100) ก่อนที่จะมีการเคลื่อนย้ายตำแหน่งในครั้งแรก ค่าที่อยู่ใน left และ top จะเป็น 100px และ 200px ซึ่งเป็นค่าชนิด String ไม่ใช่ Interger จึงไม่สามารถนำมาบวกลบคูณหารได้ ดังนั้น ในการอ่านค่าตำแหน่งจาก top และ left ควรใช้ฟังก์ชั่น parseInt() กำกับไว้ด้วยทุกครั้ง เพื่อกรอง String ให้กลายเป็น Interger เช่น จาก "100px" เป็น 100 ข้างล่างนี้เป็นตัวอย่างการเคลื่อนย้าย Layer ครับ

<html> <head> <title>RealDev.net - การเคลื่อนย้ายตำแหน่ง Layer</title> <script language="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) myelement = document.myDiv if (ie4) myelement = myDiv.style } function move1() { myelement.left = 100 myelement.top = 80 } function move2() { myelement.left = 200 myelement.top = 160 } function move3() { myelement.left = 300 myelement.top = 240 } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" onLoad="init()"> Move the block to: <A HREF="javascript:move1()">(100,80)</A> - <A HREF="javascript:move2()">(200,160)</A> - <A HREF="javascript:move3()">(300,240)</A> <BR> <A HREF="javascript:alert(parseInt(myelement.left)+ ', ' +parseInt(myelement.top))"> check location</A> <DIV ID="myDiv" STYLE="position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red;"> </DIV> </BODY> </HTML>

สำหรับการซ่อน/การแสดงและการเคลื่อนย้ายตำแหน่งของ DIV เพื่อนๆคงเข้าใจกันทุกคนแล้วนะครับ เพราะมันไม่ยากเลย วันพรุ่งนี้ผมจะเริ่มสอนการเขียนเมนูแบบมีเมนูย่อยแล้ว ใครที่ส่ง e-mail มาขอผม อย่าลืมติดตามนะครับ

Back to top





© copyright 2001 Sorrawut Korsuwansiri