Development :: การสร้าง PopUp Windows

นานแสนนานมาแล้วสมัยที่ผมยังหนุ่มได้หัดเขียน DHTML
โดยไม่รู้เรื่องเท่าที่ควร มาวันนี้ผมจำเป็นต้องทำ popup อีกครั้ง
แน่นอนครับผมลืมไปแล้ววว ว่าเขียนยังไง ผมไม่แนะนำเรื่อง tool
ที่จะใช้เขียนนะครับแล้วแต่คุณว่าจะใช้อะไรเขียน ไปหาเอาดาบหน้ากันตามสบายนะครับ (จะใช้ notepad หรือ dreamweaver หรือ อื่นๆก็ได้)

 

ต้องการ

 

• แสดง popup เว็บเพจหน้าอื่นเมื่อเพจหลักเริ่มทำงาน

การเตรียมการ

 

• คุณต้องมีเพจหลัก 1 เพจจะเป็น html หรือ asp หรือ script อื่นๆก็แล้วแต่คุณ
• คุณต้องมี popup เพจที่ต้องการแสดงเมื่อเพจหลักทำงาน

การปฏิบัติ

 

• รูปแบบคำสั่ง

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

 

ไม่ต้องตกใจนะครับ (เพราะผมงงแทนท่านไปก่อนหน้านั้นแล้ว) จะโม้ให้ฟังว่า parameter แต่ละอันคืออะไร

 

window.open เป็นการเรียกใช้ method ของ object window ให้เปิดหน้าต่างใหม่ โดยหน้าต่างที่จะเปิดขึ้นมาใหม่นี้จะมีเงื่อนไขตามที่เรากำหนด

 

• parameter

[sURL] ...เป็นการกำหนด URL ของเพจที่เราต้องการแสดง

 

เช่น

 

myWin=window.open("popthis.html")

 

อธิบาย

 

code ข้างบนนี้จะเปิดหน้าต่าง window ขึ้นมาใหม่ โดยเรียกมาจาก file ชื่อ popthis.html

 

[sName] ....ใช้กำหนดชื่อให้กับ window

 

อันนี้ผมไม่อธิบายนะครับให้ใส่ค่า null ไป (เพราะไม่เคยใช้ครับ)

 

[sFeatures] ...ใช้กำหนดคุณสมบัติของ window ที่เราเรียกให้มาแสดง โดยเราต้องกำหนดค่าเพิ่มเติม การกำหนดค่าเราต้องระบุตัวแปรและค่าให้ถูกต้องโดยการระบุค่าในแต่ละอันจะอยู่ภายใต้ " (เครื่องหมาย double quote) เดียวกัน เช่นเรากำหนดให้กว้าง 150 สูง 200

 

ก็จะระบุดังนี้

 

myWin=window.open("popthis.html",null,"width=150,height=200")

 

คงพอเข้าใจนะครับ เรามาพูดถึงตัวแปร features กันต่อนะครับ 

 

height = number ...ใช้ระบุความสูงของหน้าต่าง
width = number ...ระบุความกว้างของหน้าต่าง

 

top = number ...ใช้ระบุจุดที่หน้าต่างจะปรากฏขึ้นทางแนวนอน
Left = number ...ใช้ระบุจุที่หน้าต่างจะปรากฏขึ้นทางแนวตั้ง

อย่าลืมว่า top = 0, left =0 จะแสดงหน้าต่างที่มุมบนซ้ายของหน้าจอนะครับ

 

toolbar = yes,no ...ระบุว่าต้องการแสดง toolbar หรือไม่ในหน้าต่างใหม่

 

status = yes | no ...ระบุว่าต้องการแสดงแถบ status bar หรือไม่ในหน้าต่างใหม่

 

scrollbars = yes | no ...ระบุว่าต้องการให้มีแถบเลื่อนเมื่อหน้าต่างเล็กกว่าข้อมูลในเพจ

 

menubar =  yes | no ...ระบุว่าต้องการให้มีแถบเมนูข้อความในหน้าต่างใหม่หรือไม่

 

ตัวอย่าง

 

myWin=window.open("popthis.html",null,"width=150,height=200,top=0,left=0,menubar=no,scrollbars no,statusbar=no,toolbar=no")

 

จาก code นี้หมายความว่าให้แสดงหน้าต่างใหม่จาก file ชื่อ popthis.html โดยไม่กำหนดชื่อให้กับหน้าต่างนี้ กำหนดความกว้าง 150 พิกเซล สูง 200 พิกเซล แสดงหน้าต่างที่มุมบนสุดซ้ายสุดของหน้าจอ ไม่แสดง menubar ไม่แสดงแถบสถานะ ไม่แสดงแถบเครื่องมือ...

 

คงพอได้ละมั้ง เท่าที่ใช้กันบ่อยจะมีประมาณนี้นะครับ

 

ต้องการข้อมูลเพิ่มเติมให้ไปที่
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/open_0.asp

 

โชคดีครับ

 

 

[อาจารย์ อ้อม ฐิติรัตน์ สุวรรณสม]

โอ้โห งง จริง ๆ ด้วย

สู้ต่อไปนะคะ

[หิ่งห้อย]

สวัสดีคะ

จิ๊บดูๆๆแล้วคงยากไม่ใช่เล่นแน่ๆยังไงจิ๊บจะลองศึกษาดูบ้างเพื่อมีโอกาสเก่งแบบพี่

[kwanchaiw]

คราวหน้าจะเขียนให้อ่านง่ายกว่านี้นะครับ
ที่จริงไม่ใช่เก่งหรอกครับ
ไหนๆก็จะทวนความจำกัน
ก็เลยเขียนให้เพื่อนๆอ่านด้วยดีกว่า

[เด็กสร้าง]

ดีคับได้ความรู้ดี ผมก็เป็นคนนึงที่ทำงานด้านนี้ มีความรู้อะไรมาแลกเปลี่ยนกันนะครับ

[ขวัญชัย วัชรสุนทรกิจ]

ยินดีครับผม แต่ก็ใช่ว่าจะเก่งน่ะครับ

หากมีอะไรแนะนำก็บอกผมด้วยนะครับ

ขอบคุณครับ

[[email protected]]

ขอบคุณมากๆเลยค่ะ