ראשי > dhtml חוצה דפדפנים > יצירת עצמים חוצי דפדפן

יצירת עצמי DHTML חוצי דפדפן

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

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

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

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

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

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

יצירת תוכן HTML

גם מיקרוסופט וגם נטסקייפ תומכות במפרט של W3C שנקרא CSS Positioning או CSS-P, למרות שהמפרט המעשי נקלט בפיתוח הנוכחי של CSS2. CSS-P מספק מפרט של גיליונות סגנון למיקום אלמנטים של HTML בעמוד אינטרנט.

כדוגמה לשימוש ב-CSS-P, בלוק הקוד הבא ימקם את הכותרת ואת הפסקה שנמצאים בין תגי ה-div במיקום קבוע בעמוד, שמתחיל 100 פיקסלים לשמאל ו50- פיקסלים מהקצה העליון:

<DIV style="position:absolute; left: 100; top: 150">
<H1>The Header</H1>
<p>
The paragraph
</p>
</DIV>

ניתן ללחוץ כאן כדי לראות את הקוד בפעולה

מהן התכונות שניתן לקבוע תוך שימוש ב-CSS-P? ראשית, האלמנט מוכרח לזהות את תכונת המיקום (positioning), שייקבע כמיקום יחסי (relative) או קבוע (absolute).

 בנוסף לקביעת תכונת המיקום, מפתח עמוד האינטרנט יכול לקבוע את תכונות CSS-P הבאות:

 left- לקביעת מיקומו השמאלי של האלמנט.

top- לקביעת מיקומו העליון של האלמנט.

visibility-האם האלמנט מוחבא, נראה לעין, או יורש תכונה זו מהאלמנט שבו הוא מוכלל.

z-order- לקביעת מיקום האלמנט במחסנית, במקרה והאלמנטים מוכנסים לרבדים.

clip-חיתוך האלמנט.

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

 מיקרוסופט ונטסקייפ  תומכות ב-dynamic עבור מיקום דינמי של אלמנטים שמוקמו סטטית ע"י CSS-P. נטסקייפ תומכת במיקום דינמי גם עבור אלמנטים של layer.

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

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