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

‏ • 13 באפריל, 2002



לעיתים אנחנו רוצים למנוע ממשתמשים לראות את קוד המקור שלנו או שאנו רוצים להוסיף פונקציות קבועות בלחיצה על הלחצן הימני. הדבר פשוט להפליא בעזרת 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="https://www.webmaster.org.il">WebMaster</a><br>
<a href=# onclick="window.print()">הדפס</a>
</DIV>


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

תגיות: , , , ,

רועי

מאמרים נוספים של רועי

עוד בנושא זה

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

תגיות

.net ASP ASP.Net ASP.NET MVC C# CMS CSHTML CSS Database DB DHTML DOM Dynamic HTML HTML5 JavaScript JS PHP Reference SEO SilverLight SQL VBS Visual Studio W3C WAP WebMatrix Windows Phone wml WPF בניית אתרים בסיס נתונים דינמי דרופל הרצאות בוידאו וורדפרס מדריך סלולארי פורום צד לקוח פורום צד שרת פיתוח צד לקוח צד שרת קידום קידום אתרים