ראשי > dhtml חוצה דפדפנים >  מאמר חלק 3 > תוספת פסי גלילה

יצירת תוספת של פסי גלילה עבור נטסקייפ נוויגטור

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

<LAYER name="content" top=20 left=50 height=400 
clip.bottom=400>
</LAYER>

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

<DIV id="up" style="position:absolute; left:570; 
top: 100; visibility:hidden">
<a href="" onclick="moveup();return false">
<img src="Up.jpg" 
border=0 width=75 height=50></a>
</DIV>

<DIV id="down" style="position:absolute; left:570; 
top: 170; visibility:hidden">
<a href="" onclick="movedown();return false">
<img src="Down.jpg" 
border=0 width=75 height=50></a>
</DIV>

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

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

btm = 0; // bottom clipping value
cliptop = 0; // top clipping
layertop = 0; // top position
clipright = 0; // right clipping value
layerleft = 0; // left position

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

// reset global values
// reset object's position and clipping values
function reset_values() {
  btm = 400;   // bottom clipping value
  cliptop = 0;   // top clipping
  layertop = 20;   // top position
  clipright = LAYERWIDTH;  // right clipping value
  layerleft = 0;   // left position
  wdvlObjs["content"].objSetTop(layertop);
  wdvlObjs["content"].objSetClipRect(cliptop, layerleft, btm, clipright);
  }

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

// move inset contents up
function moveup() {
  layertop=layertop - 10;
  btm=btm + 10;
  cliptop=cliptop + 10;

  wdvlObjs["content"].objSetTop(layertop);
  wdvlObjs["content"].objSetClipRect(cliptop, layerleft, btm, clipright);

}

// move inset contents down
function movedown() {
  layertop=layertop + 10;
  btm=btm - 10;
  cliptop=cliptop - 10;

  wdvlObjs["content"].objSetTop(layertop);
  wdvlObjs["content"].objSetClipRect(cliptop, layerleft, btm, clipright);
}

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

function objChangeSource(sourcefile, width) {
   var clipbottom;
   this.objHide();
   clipbottom = this.objGetClipBottom();
   this.obj.load(sourcefile, width);
   this.obj.clip.bottom = clipbottom;
   this.objShow();
}

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

// starting function
function start() {
   if (navigator.appName == "Netscape") {
reset_values();
wdvlObjs["up"].objShow();
wdvlObjs["down"].objShow();
}
}

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

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

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