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


   

การสร้างเมนูแบบ RealDev ตอนที่ 2: การนำคลาสเมนูไปใช้

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

สำหรับบทความในตอนนี้ ผมขออธิบายวิธีใช้คลาสเมนูที่ได้สร้างไว้ในตอนที่ 1 นะครับ และคลาสที่ผมสร้างไว้ ผมได้เก็บไว้ในไฟล์ menu.js และในบทความนี้ ผมจะเรียกใช้คลาสจากไฟล์นี้ เพราะฉะนั้น ก่อนที่ท่านจะศึกษาบทความนี้ ขอให้ท่านผู้อ่าน Download ไฟล์นี้ไปเก็บไว้ในไดเรกทอรี เดียวกับเวบเพจของท่านก่อนครับ Download

การเรียกใช้ Script ที่เก็บไว้ในไฟล์ menu.js สามารถทำได้โดยเพิ่มบรรทัดนี้ ลงไปในส่วน <HEAD> ของท่านครับ

<script language="JavaScript" src="menu.js"></script>

สำหรับผู้อ่านที่ไม่ได้เก็บไฟล์ menu.js ไว้ในไดเรกทอรีเดียวกับเวบเพจ ขอให้ท่าน ระบุพาธใน src=... ให้ถูกต้อง ส่วนขั้นตอนในการเรียกใช้คลาสเมนู จะมีขั้นตอน อยู่ 5 ขั้นตอน ซึ่งผมขอสรุปให้ดูก่อนเพื่อให้เห็นภาพรวมนะครับ

1. ประกาศเมนู
2. ประกาศเมนูไอเท็ม
3. เพิ่มเมนูไอเท็ม ลงไปในเมนู
4. เขียน StyleSheet ของ ID ต่างๆที่ประกาศไว้ในเมนู
5. เรียก method build() ของเมนู เพื่อวาดเมนูลงในเอกสาร HTML

เริ่มต้นด้วยการประกาศเมนู และเมนูไอเท็มก่อนว่าเราต้องการให้มีเมนู และตัวเลือกอะไรบ้าง แล้วก็นำเมนูและตัวเลือกต่างๆมาเชื่อมโยงกัน โดยการเพิ่มตัวเลือกลงไปในเมนูด้วยเมธอด add(MenuItem) ของเมนู ส่านในขั้นตอนที่ 4 สำคัญมากสำหรับเมนูที่มีเมนูย่อย เพราะเมนูนี้ต้องใช้ CSS ในการซ่อน/แสดง เมนูย่อย ถ้าคุณลืมขั้นตอนนี้ไป เมนูย่อยทั้งหมดจะไม่ถูกซ่อน และทำให้การแสดงผลผิดพลาดได้ ส่วนขั้นตอนสุดท้าย เป็นการเรียกใช้เมนู ซึ่งจะทำให้ JavaScript เขียนโค้ดของเมนูลงไปบนเวบเพจ เมื่อเห็นภาพรวมกันแล้ว เรามาลองทำดูกันดีกว่าครับ

1. ประกาศเมนู

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

ชื่ออ็อบเจกต์ = new MenuType('ชื่อ id ใน CSS',ความกว้าง);

ชื่ออ็อบเจกต์เป็นชื่ออ็อบเจกต์ที่คุณจะใช้เรียกแทนเมนูนี้ ส่วนชื่อ id ใน CSS เป็นชื่อของ style ที่กำหนดใน CSS ซึ่งในขั้นตอนที่ 4 คุณจะต้องเขียน Style ให้กับเมนูนี้ ส่วนความกว้าง เป็นความกว้างของเมนูเวลาแสดงผลครับ

ตัวอย่าง

MainMenu = new MenuType('mainmenu',160); // เมนูหลัก
Submenu1 = new MenuType('Submenu1',200); // เมนูย่อย
Submenu2 = new MenuType('Submenu2',200); // เมนูย่อย

2. ประกาศเมนูไอเท็ม

ในขั้นตอนนี้ คุณจะต้องประกาศตัวเลือกทั้งหมด ที่จะใช้ในเมนู โดยมีรูปแบบการประกาศดังนี้ครับ

ชื่ออ็อบเจกต์ = new MenuItem(label,title,link,ชื่อ class ใน CSS,submenu)

ชื่ออ็อบเจกต์ เป็นชื่ออ็อบเจกต์ที่คุณจะใช้เรียกแทนเมนูไอเท็มนี้
label เป็นข้อความของตัวเลือกนี้ ที่จะให้แสดงในเมนู
title เป็นข้อความที่จะให้แสดง เมื่อนำ mouse มาชี้ในเมนูนี้
linkto เป็น URL ที่จะให้ลิงก์ไปเมื่อผู้ใช้เลือกเมนูนี้ หากค่านี้เป็น 'nolink' ตัวเลือกนี้จะแสดงให้เห็นเป็นข้อความธรรมดา
classname เป็นชื่อคลาสใน CSS ใช้สำหรับกำหนดสี,ฟอนต์,ขนาดของตัวอักษรในตัวเลือกนี้
submenu เป็นชื่ออ็อบเจกต์ของเมนูย่อยที่จะให้แสดงเมื่อนำ Mouse มาชี้ที่ตัวเลือกนี้ หากไม่มีเมนูย่อย คุณจะต้องกำหนดค่านี้เป็น null

ตัวอย่าง

MainMenuItem0 = new MenuItem('RealDev Menu','','nolink','menuhead',null);
MainMenuItem1 = new MenuItem('Home','Content of JavaScript section.','../home.php','menuitem',null);

3. เพิ่ม เมนูไอเท็ม ลงไปในเมนู

ในขั้นตอนนี้เป็นการเรียกเมทธอด Menu.add() เพื่อเพิ่มเมนูไอเท็ม ให้กับเมนู โดยทั้งเมนูและเมนูไอเท็ม คืออ็อบเจกต์ที่ถูกประกาศไว้ในขั้นตอนที่ 1 และ 2 โดยมีรูปแบบดังนี้ครับ

ชื่อเมนู.add(ชื่อเมนูไอเท็ม);

ตัวอย่าง

MainMenu.add(MainMenuItem0); MainMenu.add(MainMenuItem1); MainMenu.add(MainMenuItem2);

4. เขียน StyleSheet ของ ID ต่างๆที่ประกาศไว้ในเมนู

หากคุณลองสังเกตให้ดี จะพบว่า ในเมนู มีการใช้ Style Sheet อยู่ 2 ลักษณะคือ
  1. แบบเป็นคลาส ใช้ในเมนูไอเท็ม สำหรับการหนดสี ฟอนต์ และรูปแบบ ของเมนูไอเท็ม
  2. แบบเป็น id ใช้ในเมนู จุดประสงค์หลักคือ เพื่อควบคุมการซ่อน/แสดงเมนูย่อย
ในแบบที่ 1 เป็นการสร้าง Style Sheet ตามธรรมดา ซึ่งผมจะขอไม่กล่าวถึง แต่คุณสามารถอ่านเพิ่มเติมได้ใน บทเรียน CSS ส่วนแบบที่ 2 มีสิ่งที่พิเศษคือ คุณจะต้องกำหนดค่า position: เป็น "absolute" และค่า visibility: เป็น "hidden" และค่า left: เป็น 80 (ค่านี้ทำให้เมนูย่อยปรากฎในตำแหน่งเหลื่อมไปทางซ้าย 80 pixels)

5. เรียก method build() ของเมนู เพื่อวาดเมนูลงในเอกสาร HTML

สำหรับขั้นตอนนี้ก็เป็นการเรียกใช้ Menu ครับ เป็นขั้นตอนสุดท้าย ก่อนที่คุณจะเรียกฟังก์ชั่นนี้ ผมขอแนะนำให้เตรียมพื้นที่สำหรับแสดงเมนูให้ดี จัดเลย์เอาต์ให้สวย แล้วค่อยเรียกฟังก์ชั่นนนี้นะครับ อย่าลืมว่า สิ่งที่ฟังก์ชั่นนี้ทำให้คุณก็คือ การเขียน Code HTML โดยใช้ตารางและ Layer และใส่ข้อมูลที่คุณกำหนดเอาไว้ลงไปเท่านั้น

ตัวอย่างการใช้เมนู Download ไปดูได้เลยครับ

[Download]

Back to top





© copyright 2001 Sorrawut Korsuwansiri