Javascript - פתיחת חלונות קופצים

חלונות קופצים - popup windows - ישמשו אותנו כדי להציג הודעות למשתמש או כדי להפנות את המשתמש לדף כלשהו תוך שאנו שולטים בתכונות הדפדפן המציג את הדף. באמצעות Javascript אנו יכולים לשלוט בתכונות שונות כגון ממדי החלון, האם הוא יציג את שורת הכתובת, האם המשתמש יוכל לשנות את גודלו וכדומה.

"באמצעות מספר שורות קוד ניתן לשלוט בתכונות החלונות הקופצים"

לצורך פתיחת popup window נשתמש באובייקט window וב - method המובנה בו הנקרא open. כמו פונקציות מובנות אחרות בשפת Javascript גם פונקציה זו מקבלת משתנים שונים. במקרה שלנו הפונקציה מקבלת ארבעה סוגי משתנים:

  1. URL - כתובת הדף שיוצג בחלון הקופץ
  2. ID - שם / זיהוי החלון הקופץ הקופץ
  3. Features - תכונות החלון הקופץ
  4. Replace - תכונה זו אינה שימושית.

מלבד הפרמטר URL, המציין את כתובת הדף שיוצג בחלון הקופץ, הפרמטר החשוב ביותר הוא הפרמטר Features. פרמטר זה מכיל בתוכו שורה של משתנים, אשר ישפיעו על תכונות הדפדפן בחלון הנפתח. להלן רשימת המשתנים השימושיים ביותר:

  • Height - גובהו של החלון הקופץ
  • Width - רוחבו של החלון הקופץ
  • Location - באמצעות פרמטר זה ייקבע האם יוצג חלון סרגל הכתובת.
  • Menubar - באמצעות פרמטר זה נקבע האם יוצגו בחלון סרגל התפריטים.
  • Scrollbars - באמצעות פרמטר זה נקבע האם יהיו בחלון פסי גלילה.
  • Status - באמצעות פרמטר זה נקבע האם יוצג בחלון סרגל הסטטוס.
  • Toolbar - באמצעות פרמטר זה נקבע האם יוצגו בחלון סרגלי הכלים.
  • Directories - כפתורי קישורים.
  • Resizable - האם המשתמש יוכל לשנות את גודל החלון.
  • Fullscreen - באינטרנט אקספלורר בלבד.

בדוגמה הבאה אציג קוד ובו קישור המקפיץ חלון. לא אעביר פרמטר כלשהו לפונקציה window.open ולכן החלון ייפתח עם כל התכונות הרגילות של חלון דפדפן סטנדרטי.

דוגמה לפתיחת popup window ללא תכונות מיוחדות:

<a href="javascript:void(0)" onclick="window.open('HelloWorld.html')"> Open popup window</a>

בדוגמה הבאה אציג קוד ובו אדגים את השימוש בתכונות השונות בפרמטר Features ובכלל זה ממדי החלון, מראה החלון ועוד:

דוגמה לפתיחת popup window עם תכונות מיוחדות:

<a href="" onclick="window.open
('http:/www.sample.com', '','toolbar=1,location=1,directories=0,status=1,
menubar=1,scrollbars=1,resizeable=1,width=100,height=100');return false">
open popup window
</a>


כלים ומאמרים נוספים בנושא

מחולל קוד אוטומטי לחלונות קופצים (Popup Windows)

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש