בניית ה

ראשי > תפריטי dhtml נשלפים > בניית ה-html

בניית ה-html

<body id = "hotbod"
bgColor = "#FFFFFF"
onLoad = "initSetup();">
<div id = "backdrop"
style = "position:absolute;
top :0px;
left :0px;
width :250px;
height :250px;
z-index :1;
background-color:#FF0000;
visibility:hidden;"></div>



<div id = "annuities"
onMouseOut = "testOut(this.id);"
onmouseover = "clearTimeout(clearPop2);
clearTimeout(opener.clearPop);"
style = "position:absolute;
left :0px;
top :0px;
width :250px;
height :250px;
z-index :2;
background-color : #000000;
layer-background-color : #000000;
border : 1px none #000000;
visibility : hidden;">
<script language = "JavaScript1.2">
function onMouseOut() {clearPop2 = setTimeout("opener.focus()",1000);
return false;}
function onMouseOver() {clearTimeout(clearPop2);
return false;}
</script>

<script language="JavaScript1.2">
document.writeln(headlineDiv+"Annuities"+closeItemDiv);
</script>
<script language = "JavaScript1.2">
for (j=0;j<annuities_links.length;j++)
{ document.write(startItemDiv);
document.write("<a onClick=\"opener.location=this.href;self.close();
return false;\"");
document.write
(" HREF=\""+annuities_links[j+1]+"\">"+annuities_links[j]+"</a>");
document.write(closeItemDiv);
j++;
}
</script>
</div>


</div>
</body>
</html>

למרות שהקוד בבלוק הסופי מיוצר במפורש עבור כל תפריט, רק התפריט הראשון (“Annuities”( מופיע על מנת למנוע בלבול. לחיצה על קישור הכותרת תחשוף את קוד המקור לכל תפריט. ראשית, תג ה-<body> מרכיב את העמוד ומריץ את הפונקציה initSetup() כאשר העמוד נטען לגמרי.

הרובד החיצוני ביותר, שנוצר ע"י שימוש בתג <div> , הופך להורה עבור כל הרבדים שבו. מטרת הרובד הזה, שנקרא “backdrop” , לסייע לפונקציה testOut() כאשר אינטרנט אקספלורר מנסה לקבוע האם העכבר הוזז מחלון התפריט.

בצעד הבא, תפריט “annuities” נוצר. יש לזכור שכל תפריט נוצר בצורה זהה, ולכן הבאנו כאן דוגמה אחת בלבד. כל מה שנאמר לגבי תפריט “annuities”, נכון לגבי כל תפריט אחר.

רובד ההורה עבור התפריט, במקרה שלנו “annuities”, נוצר ע"י שימוש בתג <div> . יש לשים לב שזה נכון רק לגבי אקספלורר 4. נטסקייפ לא תומך בתג ה-<div> עבור מאורעות כאלה. למרות זאת, מכיוון שתג ה-<div> יוצר רובד, נטסקייפ מזהה תזוזות עכבר ביחס לרובד הזה. מכיוון שהרובד לא נוצר ע"י שימוש בתג <layer> , המאורעות onMouseOver ו-onMouseOut עבור הרובד הזה מוגדרים בנטסקייפ נוויגטור ע"י 4 שורות הקוד הבאות:

<script language="JavaScript1.2">
function onMouseOut()
{clearPop2=setTimeout("opener.focus()",1000);return false;}
function onMouseOver()
{clearTimeout(clearPop2);return false;}
</script>

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

נחזור לעסוק בתג ה-<div> . הוא כולל סגנון מובנה שקובע את הגודל ואת הצבע של הרובד ההורה. בנטסקייפ, כאשר נוצר רובד ע"י שימוש בתג <div>, צבע הרקע מתייחס רק לתוכן שבתוך הרובד ולא לרובד עצמו. נתגבר על כך באמצעות ה-layer background color, שממלא בצבע את כל שטח הרובד.

כעת נוצרת שכבת הכותרת. רובד הכותרת נוצר ע"י שימוש בתג <div> באינטרנט אקספלורר, וע"י שימוש בתג<layer> בנטסקייפ:

<script language="JavaScript1.2">
document.writeln(headlineDiv+"Annuities"+closeItemDiv);
</script>

זה נעשה ע"י משתנה בשם headlinediv שנוצר ע"י הפונקציה crossBrowser() . המשתנה מכיל קוד תג מתאים כדי ליצור רובד בכל דפדפן. הניסיון מוכיח שכאשר הרובד נוצר בנטסקייפ נוויגטור ע"י שימוש בתג <layer>, התוצאות הוויזואליות טובות מאוד, ולכן נשתמש בתגים שונים עבור כל דפדפן.

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

<script language="JavaScript1.2">
for (j=0;j<annuities_links.length;j++)
{ document.write(startItemDiv);
document.write("<a onClick=\"opener.location=this.href;self.close();
return false;\"");
document.write
(" HREF=\""+annuities_links[j+1]+"\">"+annuities_links[j]+"</a>");
document.write(closeItemDiv);
j++;
}
</script>

כל מרכיב בתפריט הוא קישור, שנתוניו מוכללים במערך שנוצר בקובץ menus.js. לכן, לולאה מתחילה לעבור במעגליות דרך הנתונים במערך. עבור כל זוג נתונים במערך (שנתוניו מוגדרים בזוגות של קישור וכתובת URL ) נוצר רובד, ע"י התג המתאים בכל דפדפן שנקבע ע"י שימוש במשתנה startItemDiv ( שנוצר ע"י crossBrowser()). קוד html עבור הקישור עצמו, התג <A>, נוצר במסמכים שנקראים בפקודה document.write. לבסוף נסגר הרובד ע"י closeItemDiv, שנוצר גם הוא ע"י crossBrowser(). ההצהרה הסופית “j++” מכריחה את הלולאה לעבוד בקפיצות של 2.

לאחר שכל תפריט נוצר, נסגר התג החיצוני ביותר “backdrop”, והוא מלווה בתגים המסיימים <body> ו-<html> .

יש לזכור שכל הקובץ popups.html נטען לתוך חלון התפריט. עדיין, יש לייצר את חלון התפריט ולשלוט ביכולת הנשלפות שלו ע"י קוד נוסף, שניתן לחשוב עליו כ"בקרת המשימה". קטע הקוד הזה משולב בדף המקורי של הלקוח.

לעמוד הקודם לעמוד הראשי לעמוד הבא