| |||||||||||||||||||||||||||||||||||||||||||
![]() |
Article | ||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||
![]() |
โดย สรวุฒิ กอสุวรรณศิริ
MenuItems ก็คือตัวเลือกในเมนูไงครับ ซึ่งผมจะทำให้เป็นคลาสเมนูไอเท็มซึ่งจะอธิบายในหัวข้อถัดไป ทีนี้ ในการนำเมนูมาวาด ก็จะต้องมี การกำหนดขนาด และการกำหนดสี ของเมนู ซึ่งสิ่งเหล่านี้อาจจะกำหนดไว้ตายตัวในฟังก์ชั่นก็ได้ แต่ถาทำเช่นนั้น เมนูของคุณจะมีสีได้เพียงสีเดียว แต่เมนูของผม จะต้องสามารถกำหนดสี และความกว้างได้ด้วย ยิ่งกว่านั้น ผมต้องการให้เมนูของผม สามารถกำหนดคุณลักษณะต่างๆผ่านทาง CSS ได้ด้วย เพื่อให้ เมนูที่ถูกทำเป็นเมนูย่อย สามารถ ซ่อน/แสดงเมนูได้ (จำได้ไหมครับ การซ่อน/แสดงต้องใช้ความสามารถของ JavaScript+CSS) ดังนั้น ผมจึงเพิ่มเติม Properties ลงไปแบบนี้
สำหรับ ฟังก์ชั่นสร้างเมนู และ ฟังก์ชั่น เพิ่มตัวเลืองลงในเมนู เป็นเมทธอดของเมนูครับ ฟังก์ชั่นสร้างเมนูจะเป็นส่วนที่วาดเมนูของเราลงบนเอกสาร HTML ตามคุณสมบัติที่เรากำหนดเอาไว้ ส่วนฟังก์ชั่นเพิ่มตัวเลืองลงในเมนู เป็นฟังก์ชั่น ที่จะใส่ตัวเลือกในเมนูเข้าไปครับ สำหรับรายละเอียดการทำงาน ผมขออธิบายในตอนท้าย เพราะเราจะต้องเข้าใจหลักการทำงานโดยรวมก่อน จึงจะเขียนโปรแกรมได้
');
document.write(' function MenuItem(lb,ti,li,cl,su) แล้วก็มาถึงเมทธอดสุดท้าย ที่ใช้ในการวาด เมนูไอเท็ม การทำงานก็คือ จะตรวจสอบก่อนว่า มีการกำหนดค่าใน linkto หรือไม่ ถ้าไม่ จะถือว่าเมนูนั้น links ไม่ได้ และไม่ทำลิงก์ให้ แต่จะถือว่าเป็นข้อความธรรมดา (ตัวอย่าเช่น คำว่า Fun Stuff ในเมนูไงครับ) ขั้นต่อมาก็จะวาดเมนูโดยการเขียน โค้ด HTML ซึ่งเป็นส่วนหนึ่งของตาราง โดยใช้คุณสมบัติต่างๆตามที่กำหนดไว้ใน Properties นั่นเอง โปรดสังเกตนะครับ เมนูของผม จะแบ่งวิธีการแสดงผลตามชนิดและเวอร์ชั่นของ Browser ไม่เหมือนกัน ตรงนี้คือส่วนที่ยังไม่สมบูรณ์นะครับ ถ้าใครนำไปพัฒนาต่อให้สมบูรณ์แล้ว ก็ส่งกลับมาให้ผมดูบ้างนะครับ
'+this.label);
}
else
{
if ((this.submenu != null)&&
(navigator.appName == "Microsoft Internet Explorer")) {
document.write(' | ');
this.submenu.build();
}
else
{
if (navigator.appName == "Microsoft Internet Explorer")
{
document.write(' | ');
} else {document.write(' | ');}
} // else
}
document.write(' | เพิ่มเติมอีกนิด กับฟังก์ชั่น menuOver() menuOut() และ menuClick() ที่ใช้ใน MenuItemBuild()
ไฟล์สำเร็จรูปของ คลาสเมนู และเมนูไอเท็ม menu.js [Download]
ตอนที่ 1 เรื่องการสร้างเมนู ขอจบเพียงเท่านี้ครับ วันพรุ่งนี้จะเป็นตอนที่ 2 การนำ Class นี้ไปใช้ อย่าลืมติดตามนะครับ
| ||
![]() | ||||||
![]() |
© copyright 2001 Sorrawut Korsuwansiri | |