החלת התנהגויות מובנות של JavaScript

עודכן לאחרונה בתאריך 27 באפריל 2021

השתמשו בנושא זה כדי להבין כיצד להחיל התנהגויות JavaScript מובנות ב-Adobe Dreamweaver.

שימוש בהתנהגויות מובנות

ההתנהגויות הכלולות עם Dreamweaver נכתבו כדי לעבוד בדפדפנים מודרניים.בדפדפנים ישנים יותר, ההתנהגויות נכשלות באופן בלתי מורגש.

פתק

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

למרות שפעולות Dreamweaver נכתבו כדי למקסם תאימות חוצת דפדפנים, חלק מהדפדפנים אינם תומכים ב-JavaScript כלל, ואנשים רבים שגולשים ברשת שומרים את JavaScript כבוי בדפדפנים שלהם.לקבלת התוצאות הטובות ביותר חוצות פלטפורמות, ספקו ממשקים חלופיים הכלולים בתגי <noscript> כדי שאנשים ללא JavaScript יוכלו להשתמש באתר שלכם.

החלת ההתנהגות Call JavaScript

התנהגות Call JavaScript מבצעת פונקציית מותאמת אישית או שורת קוד JavaScript כאשר מתרחש אירוע.(אתם יכולים לכתוב את התסריט בעצמכם, או שאתם יכולים להשתמש בקוד המסופק על ידי ספריות JavaScript שונות הזמינות בחינם ברשת.)

בחרו אובייקט ובחרו Call JavaScript מהתפריט Add Behavior בלוח Behaviors.

הקלידו את קוד JavaScript המדויק שיש לבצע, או הקלידו את שם הפונקציה.

לדוגמה, ליצירת לחצן Back, תוכל להקליד if (history.length > 0){history.back()}‎. אם עטפתם את הקוד שלכם בפונקציה, הקלידו רק את שם הפונקציה (לדוגמה, hGoBack()).

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Change Property

השתמשו בהתנהגות Change Property כדי לשנות את הערך של אחד ממאפייני האובייקט (לדוגמה, צבע הרקע של div או הפעולה של טופס).

פתק

השתמשו בהתנהגות זו רק אם אתם מכירים היטב HTML ו-JavaScript.

בחרו אובייקט ובחרו Change Property מהתפריט Add Behavior בלוח Behaviors.

מהתפריט Type Of Element, בחרו סוג אלמנט כדי להציג את כל האלמנטים המזוהים מהסוג הזה.

בחר רכיב מתפריט Element ID.

בחרו מאפיין מהתפריט Property, או הזינו את שם המאפיין בתיבה.

הזינו את הערך החדש עבור המאפיין החדש בשדה New Value.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Check Plugin

השתמשו בהתנהגות Check Plugin כדי לשלוח מבקרים לדפים שונים בהתאם לאם יש להם את התוסף המצוין מותקן.לדוגמה, ייתכן שתרצו שמבקרים יעברו לדף אחד אם יש להם Shockwave ולדף אחר אם אין להם.

פתק

לא ניתן לזהות תוספים ספציפיים ב-Internet Explorer באמצעות JavaScript.עם זאת, בחירת Flash או Director תוסיף את קוד VBScript המתאים לדף שלכם כדי לזהות את התוספים האלה ב-Internet Explorer ב-Windows.לא ניתן לזהות תוספים בדפדפן Internet Explorer המופעל ב-Mac OS.

בחרו אובייקט ובחרו Check Plugin מתפריט Add Behavior שבלוח Behaviors.

בחרו תוסף מהתפריט Plugin, או לחצו על Enter והקלידו את השם המדויק של התוסף בתיבה הסמוכה.

עליכם להשתמש בשם המדויק של התוסף כמצוין בכתב מודגש בעמוד About Plug‑ins ב-Netscape Navigator. (ב-Windows, בחרו בפקודה Help > About Plug‑ins של Navigator; ב-Mac OS, בחרו ב-About Plug‑ins מתפריט Apple.)

בתיבה If Found, Go To URL, ציינו כתובת URL למבקרים שיש להם את התוסף.

אם אתם מציינים כתובת URL מרוחקת, עליכם לכלול את הקידומת http:// בכתובת. אם תשאירו את השדה ריק, המבקרים יישארו באותו עמוד.

בתיבה Otherwise, Go To URL, ציינו כתובת URL חלופית למבקרים שאין להם את התוסף. אם תשאירו את השדה ריק, המבקרים יישארו באותו עמוד.

ציין כיצד יש לפעול אם זיהוי התוסף אינו אפשרי. כברירת מחדל, כאשר הזיהוי אינו אפשרי, המבקר נשלח לכתובת URL הרשומה בתיבה Otherwise.כדי לשלוח במקום זאת את המבקר לכתובת URL הראשונה (If Found), בחרו באפשרות Always Go To First URL If Detection Is Not Possible. כאשר אפשרות זו נבחרת, היא למעשה אומרת "הניחו שיש למבקר את התוסף, אלא אם הדפדפן מציין במפורש שהתוסף אינו קיים." באופן כללי, בחרו באפשרות זו אם תוכן התוסף הוא חיוני לעמוד שלכם; אם לא, השאירו אותה לא נבחרת.

פתק

אפשרות זו חלה רק על Internet Explorer; Netscape Navigator תמיד יכול לזהות תוספים.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Drag AP Element

התנהגות Drag AP Element מאפשרת למבקר לגרור רכיב הממוקם באופן מוחלט (AP).השתמשו בהתנהגות זו כדי ליצור פאזלים, בקרי מחוון ורכיבי ממשק ניתנים להזזה אחרים.

אתם יכולים לציין לאיזה כיוון המבקר יכול לגרור את רכיב ה-AP (אופקית, אנכית או לכל כיוון), יעד אליו המבקר אמור לגרור את רכיב ה-AP, האם להצמיד את רכיב ה-AP ליעד אם רכיב ה-AP נמצא במספר מסוים של פיקסלים מהיעד, מה לעשות כאשר רכיב ה-AP פוגע ביעד, ועוד.

מכיוון שהתנהגות Drag AP Element חייבת להיקרא לפני שהמבקר יוכל לגרור את רכיב ה-AP, עליכם לצרף את Drag AP Element לאובייקט body (עם האירוע onLoad).

בחרו Insert > Layout Objects > AP Div או לחצו על לחצן Draw AP Div בלוח Insert ואחר כך שרטטו AP Div בתצוגה Design של חלון Document.

לחצו על <body> בבורר התגים בפינה השמאלית-התחתונה של חלון Document.

בחרו Drag AP Element מתפריט Add Behavior בלוח Behaviors.

אם Drag AP Element אינו זמין, כנראה שיש לכם רכיב AP נבחר.

בתפריט הנפתח AP Element, בחר ברכיב AP.

בחרו Constrained או Unconstrained מתפריט הקופץ Movement.

תנועה לא מוגבלת מתאימה לפאזלים ולמשחקי גרירה והשמה אחרים. עבור בקרי מחוונים ותפאורה ניתנת להזזה כמו מגירות קבצים, וילונות ותריסים, בחרו בתנועה מוגבלת.

עבור תנועה מוגבלת, הזינו ערכים (בפיקסלים) בתיבות Up, Down, Left ו-Right.

הערכים הם יחסיים למיקום ההתחלתי של רכיב ה-AP. כדי להגביל תנועה באזור מלבני, הזינו ערכים חיוביים בכל ארבעת התיבות. כדי לאפשר תנועה אנכית בלבד, הזינו ערכים חיוביים עבור למעלה ולמטה ו-0 עבור שמאל וימין. כדי לאפשר תנועה אופקית בלבד, הזינו ערכים חיוביים עבור שמאל וימין ו-0 עבור למעלה ולמטה.

הזינו ערכים (בפיקסלים) עבור יעד השחרור בתיבות שמאל ועליון.

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

הזינו ערך (בפיקסלים) בתיבת 'הידבקות אם בטווח' כדי לקבוע עד כמה קרוב צריך המבקר להגיע ליעד השחרור לפני שרכיב ה-AP יידבק ליעד.

ערכים גדולים יותר הופכים את זה לקל יותר עבור המבקר למצוא את יעד השחרור.

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

כדי לציין שהמבקר חייב ללחוץ על אזור מסוים ברכיב ה-AP כדי לגרור את רכיב ה-AP, בחרו אזור בתוך רכיב מתפריט ידית הגרירה; לאחר מכן הזינו את הקואורדינטות השמאליות והעליונות ואת הרוחב והגובה של ידית הגרירה.

אפשרות זו שימושית כאשר התמונה בתוך רכיב ה-AP מכילה רכיב שמציע גרירה, כגון שורת כותרת או ידית מגירה.אל תגדירו אפשרות זו אם אתם רוצים שהמבקר יוכל ללחוץ בכל מקום ברכיב ה-AP כדי לגרור אותו.

בחר באפשרויות While Dragging שברצונך להשתמש בהן:

בחרו ב'העבר רכיב לחזית' אם רכיב ה-AP אמור לעבור לחזית של סדר הערימה במהלך הגרירה.אם אתם בוחרים באפשרות זו, השתמשו בתפריט הקופץ כדי לבחור האם להשאיר את רכיב ה-AP בחזית או להחזיר אותו למיקומו המקורי בסדר הערמה.
הזינו קוד JavaScript או שם פונקציה (לדוגמה, monitorAPelement()) בתיבה קריאה ל-JavaScript כדי לבצע שוב ושוב את הקוד או הפונקציה בזמן גרירת רכיב ה-AP.לדוגמה, תוכלו לכתוב פונקציה שעוקבת אחר הקואורדינטות של רכיב ה-AP ומציגה רמזים כגון "אתם מתחממים" או "אתם לא קרובים בכלל ליעד השחרור" בתיבת טקסט.

הזינו קוד JavaScript או שם פונקציה (לדוגמה, evaluateAPelementPos()) בתיבת הקריאה ל-JavaScript השנייה כדי לבצע את הקוד או הפונקציה כאשר רכיב ה-AP נשחרר.בחרו רק אם נידבק אם ה-JavaScript אמור להתבצע רק אם רכיب ה-AP הגיע ליעד השחרור.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

איסוף מידע על רכיב AP הניתן לגרירה

כאשר אתם מצרפים את התנהגות גרירת רכיב AP לאובייקט, Dreamweaver מוסיף את הפונקציה MM_dragLayer() לקטע ה-head של המסמך שלכם.(הפונקציה שומרת על מוסכמת השמות הישנה עבור רכיבי AP [כלומר, "Layer"] כדי שהשכבות שנוצרו בגרסאות קודמות של Dreamweaver יישארו הניתנות לעריכה.)בנוסף לרישום רכיב ה-AP כניתן לגרירה, הפונקציה הזו מגדירה שלושה מאפיינים עבור כל רכיב AP הניתן לגרירה—MM_LEFTRIGHT, MM_UPDOWN ו-MM_SNAPPED—שתוכלו להשתמש בהם בפונקציות JavaScript שלכם כדי לקבוע את המיקום האופקי היחסי של רכיב ה-AP, את המיקום האנכי היחסי של רכיב ה-AP והאם רכיב ה-AP הגיע ליעד השחרור.

פתק

המידע המסופק כאן מיועד למתכנתי JavaScript מנוסים בלבד.

לדוגמה, הפונקציה הבאה מציגה את הערך של המאפיין MM_UPDOWN (המיקום האנכי הנוכחי של רכיב ה-AP) בשדה טופס הנקרא curPosField.(שדות טופס שימושיים להצגת מידע המתעדכן באופן רציף כי הם דינמיים – כלומר, אפשר לשנות את התוכן שלהם לאחר שהעמוד סיים להיטען.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

במקום להציג את הערכים של MM_UPDOWN או MM_LEFTRIGHT בשדה טופס, אפשר להשתמש בערכים האלה במגוון דרכים אחרות. לדוגמה, אפשר לכתוב פונקציה שמציגה הודעה בשדה הטופס בהתאם לקרבה של הערך לאזור השחרור, או לקרוא לפונקציה אחרת כדי להציג או להסתיר אלמנט AP בהתאם לערך.

זה שימושי במיוחד לקרוא את המאפיין MM_SNAPPED כאשר יש מספר אלמנטי AP בעמוד, שכולם צריכים להגיע ליעדיהם לפני שהמבקר יוכל להתקדם לעמוד הבא או למשימה הבאה.לדוגמה, אפשר לכתוב פונקציה שסופרת כמה אלמנטי AP כוללים ערך MM_SNAPPED של true ולקרוא לה בכל פעם שאלמנט AP נגרר. כשהספירה של האלמנטים המחוברים מגיעה למספר הרצוי, אפשר לשלוח את המבקר לעמוד הבא או להציג הודעת ברכות.

החלת ההתנהגות Go To URL

הפעולה Go To URL פותחת עמוד חדש בחלון הנוכחי או במסגרת שצוינה. הפעולה הזו שימושית לשינוי התוכן של שתי מסגרות או יותר בלחיצה אחת.

בחרו אובייקט ולחצו על Go To URL מתפריט Add Behavior בלוח Behaviors.

בחר יעד לכתובת URL ברשימה Open In.

הרשימה Open In מציגה אוטומטית את שמות כל הפריימים במערכת הפריימים הנוכחית וגם את החלון הראשי. אם אין פריימים, החלון הראשי הוא האפשרות היחידה.

פתק

התנהגות זו עלולה לגרום לתוצאות בלתי צפויות אם פריים כלשהו נקרא top, blank, self או parent. דפדפנים לפעמים מזהים בטעות שמות אלה כשמות יעד שמורים.

לחצו על Browse כדי לבחור מסמך לפתיחה, או הזינו את הנתיב ושם הקובץ של המסמך בתיבת URL.

חזרו על שלבים 2 ו-3 כדי לפתוח מסמכים נוספים בפריימים אחרים.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Jump Menu

כאשר אתם יוצרים תפריט קפיצה באמצעות Insert > Form > Jump Menu, Dreamweaver יוצר אובייקט תפריט ומחבר אליו את התנהגות Jump Menu (או Jump Menu Go). בדרך כלל אין צורך לחבר את התנהגות Jump Menu לאובייקט באופן ידני.

אתם יכולים לערוך תפריט קפיצה קיים באחת משתי דרכים:

אתם יכולים לערוך ולסדר מחדש פריטי תפריט, לשנות את הקבצים אליהם לקפוץ ולשנות את החלון בו הקבצים נפתחים, על ידי לחיצה כפולה על התנהגות ה-Jump Menu קיימת בלוח ה-Behaviors.
ניתן לערוך את הפריטים בתפריט בדיוק כפי שהייתם עורכים פריטים בכל תפריט, על ידי בחירת התפריט ושימוש בלחצן List Values ב-Property inspector.

צרו אובייקט תפריט קפיצה אם אין כזה כבר במסמך שלכם.

בחרו את האובייקט ובחרו Jump Menu מתפריט Add Behavior בלוח Behaviors.

בצעו שינויים לפי הצורך בתיבת הדו-שיח Jump Menu ולאחר מכן לחצו על OK.

החלת ההתנהגות Jump Menu Go

הפעולה Jump Menu Go קשורה באופן הדוק לפעולה Jump Menu; Jump Menu Go מאפשרת לקשר לחצן Go לתפריט קפיצה. (לפני השימוש בפעולה זו, תפריט קפיצה חייב כבר להתקיים במסמך.) לחיצה על לחצן ה-Go פותחת את הקישור שנבחר בתפריט הקפיצה. תפריט קפיצה בדרך כלל לא זקוק ללחצן Go; בחירת פריט מתפריט קפיצה בדרך כלל גורמת ל-URL להיטען ללא צורך בפעולה נוספת מהמשתמש.אבל אם המבקר בוחר אותו פריט שכבר נבחר בתפריט הקפיצה, הקפיצה לא מתרחשת. בדרך כלל, זה לא משנה, אבל אם תפריט הקפיצה מופיע במסגרת, ופריטי תפריט הקפיצה מקשרים לדפים במסגרות אחרות, לחצן Go הוא לעתים קרובות שימושי, כדי לאפשר למבקרים לבחור מחדש פריט שכבר נבחר בתפריט הקפיצה.

פתק

כאשר משתמשים בלחצן Go עם תפריט קפיצה, לחצן ה-Go הופך למנגנון הבלעדי ש"קופץ" את המשתמש ל-URL הקשור לבחירה בתפריט. בחירת פריט תפריט בתפריט הקפיצה כבר אינה מפנה את המשתמש באופן אוטומטי לדף או מסגרת אחרת.

בחרו אובייקט לשימוש כלחצן ה-Go (בדרך כלל תמונה של לחצן), ובחרו Jump Menu Go מתפריט Add Behavior בלוח Behaviors.

בתפריט Choose Jump Menu, בחרו תפריט עבור לחצן ה-Go שברצונכם להפעיל ולחצו על OK.

החלת ההתנהגות Open Browser Window

השתמשו בפעולה Open Browser Window כדי לפתוח דף בחלון חדש. אתם יכולים לציין את המאפיינים של החלון החדש, כולל הגודל, התכונות שלו (האם הוא ניתן לשינוי גודל, יש לו סרגל תפריטים וכן הלאה), והשם. לדוגמה, אתם יכולים להשתמש בפעולה זו כדי לפתוח תמונה גדולה יותר בחלון נפרד כאשר המבקר לוחץ על תמונה ממוזערת; עם הפעולה הזו, אתם יכולים לגרום לחלון החדש להיות בגודל מדויק של התמונה.

אם אתם לא מציינים תכונות לחלון, הוא נפתח בגודל ועם התכונות של החלון שממנו הוא נפתח. ציון תכונה כלשהי לחלון מכבה באופן אוטומטי את כל התכונות האחרות שלא הופעלו במפורש.לדוגמה, אם אתם לא קובעים תכונות לחלון, הוא עשוי להיפתח ב-1024 x 768 פיקסלים ולכלול סרגל ניווט (המציג את הלחצנים חזור, קדימה, בית וטען מחדש), סרגל מיקום (המציג את ה-URL), סרגל מצב (המציג הודעות מצב, בתחתית), וסרגל תפריטים (המציג File, Edit, View ותפריטים אחרים).אם אתם קובעים במפורש את הרוחב ל-640 ואת הגובה ל-480 ולא קובעים תכונות אחרות, החלון נפתח ב-640 x 480 פיקסלים, ללא סרגלי כלים.

בחרו אובייקט ומתפריט Add Behavior בלוח Behaviors בחרו Open Browser Window.

לחצו על Browse כדי לבחור קובץ, או הזינו את ה-URL שתרצו להציג.

קבעו את האפשרויות לרוחב ולגובה החלון (בפיקסלים) ולשילוב של סרגלי כלים שונים, סרגלי גלילה, ידיות שינוי גודל וכדומה. תנו לחלון שם (השתמשו ללא רווחים או תווים מיוחדים) אם אתם רוצים שהוא יהיה המטרה של קישורים או רוצים לשלוט בו עם JavaScript.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Popup Message

הפעולה Popup Message מציגה התראת JavaScript עם ההודעה שאתם מציינים. מכיוון שלהתראות JavaScript יש רק לחצן אחד (OK), השתמשו בפעולה זו כדי לתת למשתמש מידע ולא כדי להציג בחירה.

תוכלו להטמיע כל קריאה תקפה לפונקציית JavaScript, מאפיין, משתנה גלובלי או ביטוי אחר בטקסט. כדי להטמיע ביטוי JavaScript, הציבו אותו בין סוגריים מסולסלים ({}). כדי להציג סוגר מסולסל, הציבו לפניו לוכסן הפוך (\{).

דוגמה:

כתובת ה-URL של העמוד הזה היא {window.location}, והיום הוא {new Date()}.

פתק

הדפדפן קובע את עיצוב התרעה. אם אתם רוצים שליטה רבה יותר על העיצוב, שקלו להשתמש בהתנהגות Open Browser Window.

בחרו אובייקט ובחרו Popup Message מתפריט Add Behavior של לוח Behaviors.

הזן את ההודעה בתיבה Message.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Preload Images

התנהגות Preload Images מקצרת את זמן התצוגה על ידי שמירה במטמון של תמונות שאינן מוצגות כשהעמוד מופיע לראשונה (לדוגמה, תמונות שיוחלפו בעזרת התנהגויות או תסריטים).

פתק

התנהגות Swap Image פועלת באופן אוטומטי לטעינה מוקדמת של כל תמונות ההדגשה כשאתם בוחרים באפשרות Preload Images בתיבת דו-השיח Swap Image, ולכן אין צורך להוסיף באופן ידני את Preload Images כשמשתמשים ב-Swap Image.

בחרו אובייקט ובחרו Preload Images מתפריט Add Behavior של לוח Behaviors.

לחצו על Browse כדי לבחור קובץ תמונה, או הזינו את הנתיב ושם הקובץ של התמונה בתיבה Image Source File.

לחצו על לחצן הפלוס (+) בחלק העליון של תיבת הדו-השיח כדי להוסיף את התמונה לרשימת Preload Images.

חזרו על שלבים 2 ו-3 עבור כל התמונות הנותרות שברצונכם לטעון מראש בעמוד הנוכחי.

כדי להסיר תמונה מרשימת Preload Images, בחרו בה ולחצו על לחצן המינוס (–).

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Set Text Of Frame

התנהגות Set Text Of Frame מאפשרת להגדיר באופן דינמי את הטקסט של מסגרת, ומחליפה את התוכן והעיצוב של מסגרת בתוכן שאתם מציינים.התוכן יכול לכלול כל קוד HTML תקף. השתמש בהתנהגות זו להצגת מידע באופן דינמי.

למרות שהתנהגות Set Text Of Frame מחליפה את העיצוב של מסגרת, תוכלו לבחור Preserve Background Color כדי לשמור על מאפייני צבע הרקע והטקסט של העמוד.

דוגמה:

כתובת ה-URL של העמוד הזה היא {window.location}, והיום הוא {new Date()}.

בחרו אובייקט ובחרו Set Text > Set Text Of Frame מתפריט Add Behavior של לוח Behaviors.

בתיבת הדו-השיח Set Text Of Frame, בחרו את מסגרת Target מתפריט Frame.

לחצו על לחצן Get Current HTML כדי להעתיק את התוכן הנוכחי של קטע ה-body של מסגרת Target.

הזן הודעה בתיבה New HTML.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החילו את התנהגות Set Text Of Container

ההתנהגות הגדר טקסט של מכולה מחליפה את התוכן והעיצוב של מכולה קיימת (כלומר, כל רכיב שיכול להכיל טקסט או רכיבים אחרים) בעמוד עם התוכן שתציינו. התוכן יכול לכלול כל קוד מקור HTML חוקי.

אתם יכולים להטמיע כל קריאת פונקציית JavaScript תקפה, מאפיין, משתנה גלובלי, או ביטוי אחר בטקסט. כדי להטמיע ביטוי JavaScript, מקמו אותו בין סוגריים מסולסלים ({}). כדי להציג סוגר מסולסל, הקדימו אותו בלוכסן (\{).

דוגמה:

כתובת ה-URL של הדף הזה היא {window.location}, והיום הוא {new Date()}.

בחרו אובייקט ובחרו בהגדר טקסט > הגדר טקסט של מכיל מתפריט הוסף התנהגות בלוח התנהגויות.

בתיבת הדו-שיח Set Text Of Container, השתמשו בתפריט Container כדי לבחור את רכיב היעד.

הזן טקסט או HTML חדשים בתיבה New HTML.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החילו את ההתנהגות Set Text Of Status Bar

התנהגות Set Text Of Status Bar מציגה הודעה בסרגל הסטטוס בפינה השמאלית התחתונה של חלון הדפדפן. לדוגמה, תוכלו להשתמש בהתנהגות זו כדי לתאר את יעד הקישור בסרגל הסטטוס במקום להציג את כתובת ה-URL הקשורה אליו. מבקרים לרוב מתעלמים מהודעות בשורת הסטטוס או לא שמים לב אליהן (ולא כל הדפדפנים מספקים תמיכה מלאה בהגדרת הטקסט של שורת הסטטוס); אם ההודעה שלכם חשובה, שקלו להציג אותה כהודעה קופצת או כטקסט של אלמנט AP.

פתק

אם תשתמשו בהתנהגות Set Text Of Status Bar ב-Dreamweaver, הטקסט של סרגל הסטטוס בדפדפן לא מובטח שישתנה כי חלק מהדפדפנים דורשים התאמות מיוחדות בעת שינוי טקסט סרגל הסטטוס. Firefox, לדוגמה, מחייב אתכם לשנות אפשרות מתקדמת שמאפשרת ל-JavaScript לשנות טקסט בשורת המצב.למידע נוסף, עיין בתיעוד של הדפדפן.

אתם יכולים להטמיע כל קריאה תקפה לפונקציית JavaScript, מאפיין, משתנה גלובלי, או ביטוי אחר בטקסט. כדי להטמיע ביטוי JavaScript, הציבו אותו בתוך סוגריים מסולסלים ({}). כדי להציג סוגריים מסולסלים, קדמו לו בקו נטוי הפוך (\{).

דוגמה:

כתובת ה-URL של הדף הזה היא {window.location}, והיום הוא {new Date()}.

בחרו אובייקט ובחרו Set Text > Set Text Of Status Bar מתפריט Add Behavior של לוח Behaviors.

בתיבת הדו-שיח Set Text Of Status Bar, הקלידו את ההודעה בתיבה Message.

הקלד הודעה קצרה ותמציתית. הדפדפן חותך את ההודעה אם היא לא מתאימה בשורת המצב.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלו את התנהגות Set Text Of Text Field

התנהגות Set Text Of Text Field מחליפה את התוכן של שדה הטקסט של טופס בתוכן שאתם מציינים.

אתם יכולים להטמיע כל קריאה תקפה לפונקציית JavaScript, מאפיין, משתנה גלובלי, או ביטוי אחר בטקסט. כדי להטמיע ביטוי JavaScript, הציבו אותו בתוך סוגריים מסולסלים ({}). להצגת סוגר מסולסל, הוסף לפניו לוכסן ימני (\{).

דוגמה:

כתובת ה-URL של הדף הזה היא {window.location}, והיום הוא {new Date()}.

יצירת שדה טקסט עם שם

בחרו הוספה > טופס > שדה טקסט.

אם Dreamweaver מציג הנחיה להוסיף תג טופס, לחצו על כן.

ב-Property inspector, הזן שם לשדה הטקסט. ודאו שהשם ייחודי בדף (אל תשתמשו באותו שם למספר רכיבים באותו דף, גם אם הם נמצאים בטפסים שונים).

החלת ההתנהגות Set Text Of Text Field

לבחור שדה טקסט ולבחור הגדר טקסט > הגדר טקסט של שדה מתפריט הוסף התנהגות של לוח ההתנהגויות.

לבחור את שדה הטקסט היעד מתפריט שדה טקסט ולהזין את הטקסט החדש.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Show-Hide Elements

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

בחרו אובייקט ובחרו הצג-הסתר רכיבים מתפריט 'הוסף התנהגות' בלוח ההתנהגויות.

אם הצג-הסתר רכיבים לא זמין, כנראה שיש רכיב AP נבחר. מכיוון שרכיבי AP לא מקבלים אירועים בשני הדפדפנים 4.0, עליכם לבחור אובייקט אחר – כמו תג <body> או קישור (תג <a>).

מרשימת הרכיבים, בחרו את הרכיב שברצונכם להציג או להסתיר ולחצו על הצג, הסתר, או שחזר (שמשחזר את הנראות כברירת מחדל).

חזרו על שלב 2 עבור כל יתר הרכיבים שברצונכם לשנות את הנראות שלהם.(ניתן לשנות את הנראות של מספר רכיבים עם התנהגות אחת.)

לחץ על OK וודא שאירוע ברירת המחדל נכון.

התנהגות זו הוצאה משימוש החל מ-Dreamweaver CS5.

החלת ההתנהגות Swap Image

התנהגות החלפת תמונה מחליפה תמונה אחת באחרת על ידי שינוי המאפיין src של תג <img>. השתמשו בהתנהגות זו ליצירת אפקטי רולאובר ללחצנים ואפקטי תמונה אחרים (כולל החלפת יותר מתמונה אחת בו-זמנית).הוספת תמונת גלגול מוסיפה אוטומטית התנהגות החלפת תמונה לדף שלכם.

פתק

מכיוון שרק המאפיין src מושפע מההתנהגות הזו, כדאי להחליף לתמונה שיש לה אותן מידות (גובה ורוחב) כמו המקור. אחרת, התמונה שאתם מחליפים מתכווצת או מתרחבת כדי להתאים למידות של התמונה המקורית.

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

לבחור הוספה > תמונה או ללחוץ על לחצן תמונה בלוח הוספה כדי להוסיף תמונה.

בבוחן המאפיינים, הזינו שם לתמונה בתיבת הטקסט השמאלית ביותר.

אין חובה לתת שמות לתמונות; הן מקבלות שמות באופן אוטומטי כשאתם מצרפים את ההתנהגות לאובייקט. אולם קל יותר להבחין בין תמונות בתיבת הדו-שיח החלפת תמונה אם תיתנו שמות לכל התמונות מראש.

להוספת תמונות נוספות, חזור על הצעדים 1 ו-2.

בחרו את האובייקט (בדרך כלל התמונה שאתם מתכוונים להחליף) ובחרו החלפת תמונה מתפריט הוסף התנהגות בלוח ההתנהגויות.

מרשימת התמונות, בחרו את התמונה שאתם רוצים לשנות את המקור שלה.

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

חזרו על שלבים 5 ו-6 עבור כל תמונה נוספת שאתם רוצים לשנות. השתמשו באותה פעולת החלפת תמונה עבור כל התמונות שאתם רוצים לשנות בבת אחת, אחרת פעולת השחזור המתאימה של החלפת התמונה לא תשחזר את כולן.

בחרו באפשרות טען תמונות מראש כדי לשמור את התמונות החדשות במטמון כשהעמוד נטען.

זה מונע עיכובים בהורדה כשמגיע הזמן שהתמונות יופיעו.

לחץ על OK וודא שאירוע ברירת המחדל נכון.

החלת ההתנהגות Validate Form

התנהגות ולידט טופס בודקת את התוכן של שדות טקסט מוגדרים כדי להבטיח שהמשתמש הזין את סוג הנתונים הנכון. צרפו את ההתנהגות הזאת לשדות טקסט בודדים עם האירוע onBlur כדי לאמת את השדות בזמן שהמשתמש ממלא את הטופס, או צרפו אותה לטופס עם האירוע onSubmit כדי להעריך מספר שדות טקסט בבת אחת כשהמשתמש לוחץ על לחצן השליחה.צירוף ההתנהגות הזאת לטופס מונע שליחת טפסים עם נתונים לא חוקיים.

בחרו הכנס > טופס או לחצו על לחצן טופס בלוח הכנס כדי להכניס טופס.

בחרו הכנס > טופס > שדה טקסט או לחצו על לחצן שדה טקסט בלוח הכנס כדי להכניס שדה טקסט.

חזור על הפעולה להוספת שדות טקסט נוספים.

בחר שיטת אימות:

כדי לאמת שדות בודדים כשהמשתמש ממלא את הטופס, בחרו שדה טקסט ובחרו Window > Behaviors.
כדי לולדט מספר שדות כשהמשתמש שולח את הטופס, לחצו על התג <form> בבורר התגים בפינה השמאלית התחתונה של חלון המסמך ובחרו חלון > התנהגויות.

בתפריט Add Behavior, בחר באפשרות Validate Form.

בצע אחת מהפעולות הבאות:

אם אתם מאמתים שדות בודדים, בחרו את אותו שדה שבחרתם בחלון המסמך מרשימת השדות.
אם אתם מאמתים מספר שדות, בחרו שדה טקסט מרשימת השדות.

בחרו באפשרות נדרש אם השדה חייב להכיל נתונים כלשהם.

בחר באחת מאפשרויות Accept הבאות:

Use Anything

בודק שהשדה הנדרש מכיל נתונים; הנתונים יכולים להיות מכל סוג.

Use E‑mail address

בודק שהשדה מכיל סמל @.

Use Number

בודק שהשדה כולל ספרות בלבד.

Use Number From

בודק שהשדה מכיל מספר בטווח מסוים.

אם בחרתם לאמת מספר שדות, חזרו על שלבים 6 ו-7 עבור כל שדה נוסף שברצונכם לאמת.

לחץ על OK.

אם אתם מאמתים מספר שדות כשהמשתמש שולח את הטופס, האירוע onSubmit מופיע באופן אוטומטי בתפריט האירועים.

אם אתם מאמתים שדות בודדים, בדקו שאירוע ברירת המחדל הוא onBlur או onChange.אחרת, בחר אחד מאירועים אלה.

שני האירועים מפעילים את התנהגות 'Validate Form' כאשר המשתמש עוזב את השדה.ההבדל הוא ש‎onBlur מתרחש בין אם המשתמש הקליד בשדה ובין אם לא, ו‎onChange מתרחש רק אם המשתמש שינה את תוכן השדה.האירוע onBlur מועדף אם השדה נדרש.

פריטים דומים נוספים

בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.

פתיחת היישום

שימוש בהתנהגויות של JavaScript (הוראות כלליות)

אודות XML ו-XSLT

למידה

למד עם מדריכי וידאו שלב אחר שלב ועם הדרכה מעשית ישירות ביישום.

קהילה

הצטרפו לדיונים, מצאו תשובות, למדו ממומחים ושתפו את הידע שלכם.

דף הבית של Adobe

גשו ליישומים ולשירותים המועדפים עליכם ב-Creative Cloud, לניהול קבצים ועוד.