Article

การใช้ DIV สร้างเลเยอร์ ตอนที่ 1 : การวางตำแหน่งและการกำหนดขนาด

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

บทความนี้ก็เป็นพื้นฐานอย่างที่ 2 ที่ผมต้องอธิบายก่อนการสร้าง RealDev Menu นะครับ เพราะเมนูของผมสามารถมีเมนูย่อยได้ และเลื่อนขึ้นลงได้ก็ด้วยความสามารถของเลเยอร์นั่นเอง น่าสนใจมาก ถ้าเพื่อนๆอ่านบทความนี้จบแล้วอาจจะสร้าง เมนูได้ดีกว่าของผมอีกนะครับ เพราะฉะนั้น เรามาเริ่มกันเลยดีกว่า GO GO GO!

รู้จักกับ Tag <DIV>

แท็ก <DIV> เป็นแท็กที่ โดยปกติแล้วจะมีผลต่อเอกสารเหมือนกับ <P> ถ้าไม่ได้กำหนดคุณลักษณะใดๆลงไป แต่เราจะบรรจุข้อมูลลงไปในแท็กนี้ แล้วเราจะใช้ CSS,DHTML และ JavaScript ร่วมกัน ในการปรับเปลี่ยน คุณลักษณะต่างๆของมัน ซึ่งจะทำให้เรานำไปสร้าง effect ต่างๆในเวบได้มากมาย เช่น รูปภาพลอยไปมา เมนูเลื่อนตามการ Scroll หรือการทำเมนูย่อย(ใช้การเปิดปิดการแสดงผลไงครับ) และผมขอเรียกมันว่า "Layer" จุดเด่นที่น่าสนใจของ <DIV> อีกข้อหนึ่งก็คือ ทั้ง Internet Explorer และ Netscape 4.XX ต่างก็สนันสนุนการใช้ <DIV>

ตัวอย่างการใช้ <DIV >

<div> ข้อความนี้อยู่ในแท็ก <DIV > ครับผม </div>

ผลที่เกิดขึ้น

ข้อความนี้อยู่ในแท็ก <DIV > ครับผม

การกำหนดชื่ออ็อบเจกต์ให้กับ <DIV > เพื่อใช้อ้างอิงใน JavaScript เราจะไม่ใช้คำว่า name= แต่จะใช้คำว่า id="ชื่อ อ็อบเจกต์" แทนครับ เช่น <div id="mylayer"> ข้อความนี้อยู่ในแท็ก <DIV > ครับผม </div>

ส่วนการกำหนดคุณสมบัติเริ่มต้นของ <DIV > เราจะใช้ Cascading Style Sheet ครับ โดยสามารถกำหนดได้ทั้งในแบบ Inline Style และแบบ ใส่ใน HEAD และแบบ Include ไฟล์ ซึ่งผู้อ่านสามารถอ่าน รายละเอียดของการใช้ CSS ทั้ง 3 แบบได้ที่ หน้าบทเรียน CSS ครับ

การวางตำแหน่ง และการกำหนดขนาด

วิธีกำหนดการวางตำแหน่ง เราจะใช้ Attribute 3 ตัวครับ คือ position: เป็นการกำหนดวิธีวางตำแหน่ง ถ้าเป็น absolute จะเป็นการกำหนดตำแหน่งแน่นอน ถ้าเป็นrelative จะเป็นการกำหนดตำแหน่ง แบบสัมพันธ์กับเนือหาในส่วนอื่นๆ
top: เป็นการกำหนดตำแหน่งในแนวตั้ง
left:เป็นการกำหนดตำแหน่งในแนวนอน

ส่วนการกำหนดขนาด เราจะใช้ width และ height ในการกำหนดความกว้างและความสูงครับ

ตัวอย่าง การวางตำแหน่งและการกำหนดขนาด DIV

<html> <head> <title>Realdev.net - DIV Positioning demo</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <DIV ID="mydiv" STYLE="position:absolute; left:100; top:50; width:80;"> HTML goes here </DIV> </BODY> </HTML>

การใช้ JavaScipt ติดต่อกับ <DIV>

เมื่อเราวาง <DIV> ลงในเอกสารแล้ว เราย่อมสามารถติดต่อกับมันได้เหมือนเป็น อ็อบเจกต์ตัวหนึ่ง เหมือนกับส่วนประกอบอื่นๆ อย่าง form,input,image ,etc. แต่ <DIV> แต่ <DIV> จะพิเศษอยู่หน่อยตรงที่ วิธีอ้างถึงตัวมันใน IE และ Netscape นั้นไม่เหมือนกัน

ไม่เหมือนกันอย่างไร เรามาดูกันเลยดีกว่าครับ สมมุติว่าผมวาง <DIV> ไว้แบบนี้ (สังเกตนิดนึง <DIV> ของผมชื่อ "myDiv" นะครับ)

การอ้างอิงถึง Properties ของอ็อบเจกต์นี้ใน Netscape จะเป็นแบบนี้ครับ

document.myDiv.ชื่อProperties

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

document.layers["myDiv"].ชื่อProperties

ส่วนใน IE จะเป็นแบบนี้ครับ

myDiv.style.ชื่อProperties

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

document.all["myDiv"].style.ชื่อProperties

ทีนี้ถ้าเราจะเขียนให้มันสนับสนุน Browser ทั้ง 2 ตัว จะทำอย่างไร ไม่ยากครับ เราก็ต้องตรวจสอบก่อนว่า ผู้ชมใช้ Browser อะไร วิธีการก็ง่ายๆครับ แค่เช็คว่ามี อ็อบเจกต์ all หรือ layers ก็จะรู้ได้ทันที เพราะ IE จะมี document.all ส่วน Netscape จะมี document.layers ส่วนของการตรวจสอบเวอร์ชั่นจึงเป็นแบบนี้ครับ

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

ผมจะใส่บรรทัดนี้ไว้ที่ต้นโปรแกรม หลังจากนั้น ถ้าผมต้องการจะทราบว่าผู้ชมใช้ Browser อะไร ผมก็จะตรวจสอบจากตัวแปร ns4 และ ie4 ได้เลย

เทคนิคเพิ่มเติม

หลังจากที่ทราบว่าผู้ชมใช้ Browser อะไรแล้ว ถ้าเขียนแบบปกติ ก็ต้องเขียนโปรแกรม 2 รอบอยู่ดี ถูกไหมครับ แต่ผมขอเสนอเทคนิการ ใช้ตัวแปรพ้อยเตอร์ เพื่อชี้ไปที่อ็อบเจกต์ที่ถูกต้องเลย อ่านๆไปอาจจะงงคำศัพท์ ดูวิธีทำเลยดีกว่าเนอะ

if (ns4) myDivPtr = document.myDiv
if (ie4) myDivPtr = myDiv.style

แบบนี้ เวลาเราขียนโปรแกรม สมมุติว่าจะอ้างถึง document.myDiv.left(ใน Netscape) หรือ myDiv.style.left (ใน IE) เราก็ใช้แค่ myDivPtr.left ก็ใช้ได้ทั้ง 2 Browser เลย สบายแฮ อิอิ แต่!!!! ระวังอีกหน่อย ชื่อ Properties บางตัวก็ใช้ไม่เหมือนกันอีก อย่าหาว่าผมเรื่องมากเลยนะครับ เพราะ Browser มันเรื่องมากต่างหาก แต่ถ้าต้องใช้ตัวไหนที่มันไม่เหมือนกันแล้วผมจะบอกครับ ไม่ต้องห่วง :-)

ตัวอย่างการติดต่อกับ Properties แบบที่ใช้ได้ทั้ง IE และ Netscape

<html> <head> <title>RealDev.net - CSS Properties</title> <script language="JavaScript">  </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" onLoad="init()"> <A HREF="javascript:alert(myDivPtr.left)">left</A> - <A HREF="javascript:alert(myDivPtr.top)">top</A> - <DIV ID="myDiv" STYLE="position:absolute; left:50px; top:100px; width:30px; height:30px; background-color:red; layer-background-color:red;"> </DIV> </BODY> </HTML>

เนื้อหาชักเยอะแล้ว วันนี้ขอจบแค่นี้ก่อนนะครับ พรุ่งนี้จะเป็นเรื่องของวิธีการ ซ่อนและแสดงเลเยอร์ กับการเคลื่อนย้ายตำแหน่งของมัน อย่าลืมติดตามนะครับ

		© copyright 2001 Sorrawut Korsuwansiri