וובמאסטר - תיכנות ובניית אתרים

פתיחת תפריט בלחיצה על הלחצן הימני

roee/‏ 13 אפריל, 2002
F+
F-
לעיתים אנחנו רוצים למנוע ממשתמשים לראות את קוד המקור שלנו או שאנו רוצים להוסיף פונקציות קבועות בלחיצה על הלחצן הימני. הדבר פשוט להפליא בעזרת JS בצד הלקוח. כאשר נתפוס את הלחיצה (הארוע - oncontextmenu) נחסום את התצוגה הרגילה ונפעיל במקומה פונקציה משלנו, שתראה שיכבה שאנחנו בנינו.

יצירת השיכבה

ניצור DIV כלשהוא [ או LAYER אם אנחנו רוצים שזה יתאים גם לNETSCAPE] ונרשום בתוכו מה שאנו רוצים. רצוי למקם את השכבה בסוף המסמך. ניתן לה את הID (השם שייצג אותו בDOM) המקורי righClick.
<DIV id=righClick> זה התפריט החדש שפתחנו פה נכניס קישורים<br> <a href="http://www.ennovate.ws">אתר הבית</a><br> <a href="http://www.webmaster.co.il">WebMaster</a> </DIV>




יצירת הסטייל

נקבע לשכבה הזו סטייל נקבע את הVISIBILITY לHIDDEN. לא לשכוח לתת לו מיקום אבסולוטי ולמקם אותו הכי גבוה בסדר השכבות. ננקה את האיזורים משנה הצדדים, ניתן קצת רקע וצבע גבול ונישר לימין:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17  
<style>
#righClick
{
    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
}
</style>


יצירת הפונקציות

עכשו ניצור את הפונקציות שמראות או מסתירות את השכבה. הפונקציה שמראה את השכבה צריכה לעמוד ב3 תנאים: היא צריכה להראות את השכבה, לפי המיקום של העכבר, ולעשות זאת כל פעם מחדש בדיוק כמו התפריט המקורי של העכבר. הנה הפונקציה שמראה:
1
2
3
4
5
6
7  
function showRightClick()
{
    righClick.style.visibility="visible";
    righClick.style.display="";
    righClick.style.top=event.y;
    righClick.style.left=event.x;
}


הפרמטרים event.x ו event.y מחזירים לנו את המיקומים של העכבר, בעזרתם אנו גורמים לתפריט להפתח בדיוק איפה שבוצעה הלחיצה עם העכבר. שימו לב שאנו מטפלים פה גם בdisplay וגם בvisibility: בפעם הראשונה אנו מראים את השכבה, ובפעמים הבאות אנו עובדים עם תצוגת השכבה (display) .
פונקציית ההסתרה רק הופכת את השכבה לבלתי נראית, והיא מופעלת בארוע ONCLICK של הBODY:
1
2
3
4  
function hideRightClick()
{
    righClick.style.display="none";
}


הקריאה לפונקציות

עכשו נוסיף את הקריאות לפונקציות לתגית הBODY :
1  
<BODY oncontextmenu="showRightClick(); return false" onclick="hideRightClick()">


הוספת פונקציונאליות נוספת

כמובן שאפשר להוסיף עוד פונקציות כמו הדפסה, שמירה או שליחת לחבר, ע"י הוספת הפקודה בתוך השכבה, לדוגמא, הפעלת פונקציית ההדפסה:
1
2
3
4
5
6
7  
<DIV id=righClick>
זה התפריט החדש שפתחנו
כאן נכניס הקישורים<br>
<a href="http://www.ennovate.ws">אתר הבית</a><br>
<a href="http://www.webmaster.org.il">WebMaster</a><br>
<a href=# onclick="window.print()">הדפס</a>
</DIV>


את הדוגמא בפעולה ניתן לראות פה. בהצלחה!

roee

http://www.ennovate.ws
תגיות: oncontextmenu‏  /  JS‏  /  CSS‏  /  תפריט‏  /  קליק ימני‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות