לעיתים אנחנו רוצים למנוע ממשתמשים לראות את קוד המקור שלנו או שאנו רוצים להוסיף פונקציות קבועות בלחיצה על הלחצן הימני. הדבר פשוט להפליא בעזרת JS בצד הקליינט. כאשר נתפוס את הלחיצה (האירוע - onContextMenu) נחסום את התצוגה הרגילה ונפעיל במקומה פונקציה משלנו, שתראה איזה שהיא שיכבה.
יצירת השכבה
ניצור DIV כלשהוא (או LAYER אם אנחנו רוצים שזה יתאים גם ל- NETSCAPE) ונרשום בתוכו מה שאנו רוצים. רצוי למקם את ה- DIV בסוף המסמך. ניתן לו את ה- ID (השם שייצג אותו ב- DOM) המקורי rightClick.
<![CDATA[
<div id="rightClick">
זה התפריט החדש שפתחנו
פה אנחנו נשים קישורים<br>
<a href="http://www.ennovate.ws">אתר הבית</a>
</div>
]]>
נקבע ל- DIV הזה סטייל ונקבע את ה- VISIBILITY ל- HIDDEN. לא לשכוח לתת לו מיקום אבסולוטי ולמקם אותו הכי גבוה בסדר השכבות. ננקה את האיזורים משנה הצדדים, ניתן קצת רקע וצבע גבול ונישר לימין:
<![CDATA[
<style>
#rightClick
{
Clear: both;
Border-Right: #663300 3px double;
Border-Top: #663300 1px solid;
Z-Index: 12;
Visibility: hidden;
Margin: 5px;
Border-Left: #663300 1px solid;
Width: 20%;
Border-Bottom: #663300 1px solid;
Position: absolute;
Background-Color: #999900;
Text-Align: right;
Font-Family: Arial (Hebrew)
}
</style>
]]>
יצירת הפונקציות
עכשו ניצור את הפונקציות שמראות או מסתירות את התפריט. הפונקציה שמראה את התפריט צריכה לעמוד בכמה תנאים:
היא צריכה להראות את ה- DIV לפי המיקום של העכבר ולעשות זאת כל פעם מחדש בדיוק כמו התפריט המקורי של העכבר.
הנה הפונקציה שמראה:
<![CDATA[
function showRightClick()
{
rightClick.style.visibility="visible";
rightClick.style.display="";
rightClick.style.top=event.y;
rightClick.style.left=event.x;
}
]]>
הפרמטרים event.x ו- event.y מחזירים לנו את המיקומים של העכבר. שימו לב שאנו מטפלים פה גם ב- display וגם ב- visibility: בפעם הראשונה אנו מראים את ה- DIV ובפעמים הבאות אנו עובדים עם ה- display.
הפונקציה שמסתירה צריכה רק להסתיר את התפריט, והיא תופעל בארוע onClick של ה- BODY:
<![CDATA[
function hideRightClick()
{
rightClick.style.display="none";
}
]]>
עכשיו נוסיף את הטריגרים הנחוצים לתגית ה- BODY:
<![CDATA[
<BODY onContextMenu="showRightClick();return false" onClick="hideRightClick()">
]]>
וזה הכל... כמובן שאפשר להוסיף עוד פונקציות למשל הדפסה, שמירה או משלוח לחבר. כל שעלינו לעשות הוא בתוך ה- DIV להפעיל את הפונקציות הרצויות. לדוגמא, הדפסה:
<![CDATA[
<div id="rightClick">
זה התפריט החדש שפתחנו
פה אנחנו נשים קישורים<br>
<a href="http://www.ennovate.ws">אתר הבית</a><br>
<a href="javascript:window.print()">הדפס</a>
</div>
]]>
בהצלחה!
|
.png)
