ראשי > dhtml חוצה דפדפנים > מאמר חלק 2 > אינדקס כרטיסים > הוספת קוד

הוספת קוד לאינדקס הכרטיסים

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


<SCRIPT src="ns4_obj.js" language="javascript1.2">
</SCRIPT>

<SCRIPT src="ie4_obj.js" language="jscript">
</SCRIPT>
  

הקריאה ליצירת העצמים נעשית ע"י ניהול אירוע onLoad:   

<BODY onload="wdvlCreateObjects()">

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

<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// global
var cardNumber = 1;
LASTCARD = 5;

// called when page loaded, to show first
// index card and next button
function start() {
   wdvlObjs["contents1"].objShow();
   wdvlObjs["nextbutton"].objShow();   
}

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

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

 
// get next card in stack
function next_card() {
   wdvlObjs["contents" + cardNumber].objHide();
   cardNumber++;
   wdvlObjs["contents" + cardNumber].objShow();
   set_buttons();
}

// get previous card in stack
function prev_card() {
   wdvlObjs["contents" + cardNumber].objHide();
   cardNumber=cardNumber - 1;
   wdvlObjs["contents" + cardNumber].objShow();
   set_buttons();
}

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

// show or hide navigation buttons
// depending on location in stack
function set_buttons() {
   if (cardNumber > 1)
      wdvlObjs["prevbutton"].objShow();
   else
      wdvlObjs["prevbutton"].objHide();

   if (cardNumber < LASTCARD)
      wdvlObjs["nextbutton"].objShow();
   else
      wdvlObjs["nextbutton"].objHide();
}
      
//-->
</script>

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

<BODY onload="wdvlCreateObjects();start()">

זה הכל עבור הדוגמה הפשוטה.  

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

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

 "גורם ה-ooh"

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

אולי נתפשנו יותר מדי ל-DHTML. אני קוראת לתופעה הזו בשם "גורם ה-ooh": כולנו רוצים ליצור עמודי אינטרנט שמי שיקרא אותם יאמר "ooh, תסתכלו על זה!". אני יודעת שזה מה שאני רציתי…

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

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

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

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

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

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