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

הוספת חיתוך לעצמים חוצי דפדפן

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

ראשית נוסיף את יכולת חיתוך התוכן לעצמים של נטסקייפ. נוסיף 4 שיטות (methods) כדי לקבוע את ערכי החיתוך לכל צד של מקום האחסון של העצם (עליון, תחתון, ימני ושמאלי), ושיטה אחת שתקבע את כל 4 ערכי החיתוך ביחד. השיטות מתווספות לבנאי האובייקט כפי שנראה בקוד הבא:

this.objSetClipRect = objSetClipRect;
this.objGetClipLeft = objGetClipLeft;
this.objGetClipRight = objGetClipRight;
this.objGetClipTop = objGetClipTop;
this.objGetClipBottom = objGetClipBottom;

שים לב שהשינויים בבנאי העצם עבור IE זהים בדיוק לשינויים עבור העצם של נוויגטור.

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

// clip object
function objSetClipRect (top,left,bottom,right) {
if (top == null) top = this.objGetClipTop();
if (left == null) left = this.objGetClipLeft();
if (bottom == null) bottom = this.objGetClipBottom();
if (right == null) right = this.objGetClipRight();
this.obj.clip.left = left;
this.obj.clip.right = right;
this.obj.clip.top = top;
this.obj.clip.bottom = bottom;
}

// get current clip right 
function objGetClipRight() {
return this.obj.clip.right;
}

// get current clip left
function objGetClipLeft() {
return this.obj.clip.left;
}

// get current clip top
function objGetClipTop() {
return this.obj.clip.top;
}

// get current clip bottom
function objGetClipBottom() {
return this.obj.clip.bottom;
}

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

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

rect(10px,500px,300px,20px) 

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

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

// convert string to value
function convert(strng) {
      var i = parseInt(strng.slice(0,strng.length-2));
return i;
}

// return string reference
function get_entry(obj,indx) {
strng = obj.obj.style.clip;
strng = strng.slice(5,strng.length-1);
var entries = strng.split(" ");
switch(indx) {
   case "top" :
if (entries[0] == "auto") 
   return obj.objGetTop();
else
   return convert(entries[0]);
break;
   case "left" :
if (entries[3] == "auto") 
   return obj.objGetLeft();
else
   return convert(entries[3]);
break;
   case "bottom" :
if (entries[2] == "auto") 
   return obj.obj.style.pixelHeight;
else
   return convert(entries[2]);
break;
   case "right" :
if (entries[1] == "auto") 
   return obj.obj.style.pixelWidth;
else
   return convert(entries[1]);
}
}

שים לב שפונקצית הסקריפט split משמשת לאכלוס מערך עם ערכים מהמחרוזת, תוך ניתוח מחרוזת ערכי מלבן החיתוך. בנוסף, שים לב שאם נמצא ערך אוטומטי (“auto”) , הערכים של המיקום מוחזרים. מצאנו שזו הצורה הטובה ביותר ליצירת ההתנהגות שאנו רוצים עבור העצמים, למרות ש"auto" נועד בעצם לומר שערך החיתוך עבור צד אחד זהה לערך החיתוך של הצד השני. למרות זאת, מכיוון שהפונקציה שקובעת את אזור החיתוך עבור העצם משתמשת בערכי top, left, right, width, height של העצם לקביעת ערכי החיתוך top ,left right  ו-bottom של החיתוך עבור העצם, במקום קביעת הערכים ל"auto", הרי ששתי הפונקציות משלימות זו את זו.  

הקוד לקביעת וקבלת ערכי החיתוך מופיע בבלוק הקוד הבא:

// clip object
function objSetClipRect (top,left,bottom,right) {
if (top == null) top = this.objGetClipTop();
if (left == null) left = this.objGetClipLeft();
if (bottom == null) bottom = this.objGetClipBottom();
if (right == null) right = this.objGetClipRight();
this.obj.clip.left = left;
this.obj.clip.right = right;
this.obj.clip.top = top;
this.obj.clip.bottom = bottom;
}

// get current clip right 
function objGetClipRight() {
return this.obj.clip.right;
}

// get current clip left
function objGetClipLeft() {
return this.obj.clip.left;
}

// get current clip top
function objGetClipTop() {
return this.obj.clip.top;
}

// get current clip bottom
function objGetClipBottom() {
return this.obj.clip.bottom;
}

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

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