ראשי > dhtml חוצה דפדפנים > מאמר חלק 1 > עמוד מבחן

 

שימוש בעצמים חוצי דפדפן …עמוד מבחן

כדי לבחון את העצם, יצרתי עמוד בעל שני בלוקים של div. הבלוק הראשון מכיל טופס עם כפתורים שלא אמור להיכלל במערך העצמים, ולכן לא נעשה שימוש במאפיין ID:

<DIV style="position:absolute; left:10; top:10;
background-color: yellow; 
layer-background-color: yellow; padding-top: 20px; 
width: 500; height:150; clip: rect(0,500,150,0)">
<form action="">
<center>
<INPUT type = "button"
value = "Move Block Left"
onclick = "move_left(-1)"> 
<INPUT type = "button"
value = "Move Block right"
onclick = "move_left(1)"><p>
<INPUT type = "button"
value = "Move Block Up"
onclick ="move_up(-1)"> 
<INPUT type = "button"
value = "Move Block Down"
onclick = "move_up(1)"><p>
<INPUT type = "button"
value = "Hide Block"
onclick = "hide()"> 
<INPUT type = "button"
value = "Show Block"
onclick = "show()"
>
</center>
</FORM>
</DIV>

כל אחד מהכפתורים בטופס קורא לפונקציה כאשר הכפתור נלחץ. הפונקציות ישנו את המיקום ואת מצב ההיראות של בלוק div אחר, שיווצר בהמשך.

בלוק ה-div השני מכיל כותרת ופיסקה וממוקם מתחת לטופס:

<DIV id ="info"
style ="position:absolute;
left: 250;
top: 180;
width: 300;
height: 200;
background-color:red;
layer-background-color: red; clip: rect(0,300,200,0)"
>
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements: 
a header and a paragraph
</p>
</DIV>

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

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

<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// move element right and left
function move_left(sign) {
   var lft = wdvlObjs["info"].objGetLeft();
   lft+= 10 * sign;
   wdvlObjs["info"].objSetLeft(lft);
}
// move element up and down
function move_up(sign) {
   var top = wdvlObjs["info"].objGetTop();
   top+= 10 * sign;
   wdvlObjs["info"].objSetTop(top);
}
// hide element  
function hide() {
   wdvlObjs["info"].objHide();
}
// show element
function show() {
   wdvlObjs["info"].objShow();
}
//-->
</script>

ניתן ללחוץ כאן כדי לראות דוגמה

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

סיכום:

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

מהם היתרונות בשימוש בעצמים חוצי דפדפן לשם גישור על הפערים בין הדפדפנים?

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

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

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

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

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

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

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

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

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