ראשית אסביר על איזה אירוע מדובר, מה הוא עושה, איך אתם יכולים להשתמש איתו, ולבסוף אראה דוגמה מעולה שראיתי היום לשימוש באירוע הזה (אשר למעשה היווה עילה לכתיבת הפוסט הזה)

אז מה זה?

contextmenu הינו אירוע javascript שמופעל כאשר לוחצים עם העכבר לחיצה ימנית על אלמנט כלשהו בדפדפן.

מה הוא עושה?

כברירת מחדל הוא פשוט יפתח לכם את התפריט המוכר של הדפדפן, משהו כזה:

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

איך משתמשים בזה?

אפשר כמו בכל אירוע אחר:

השורה הזו יוצרת כפתור שבלחיצה ימנית עליו במקום שהתפריט יפתח – תוקפץ הודעה האומרת ‘You right-clicked on the button!’ . כמובן שאם לא הייתי אומר לו אחרי ה alert שיחזיר false הייתה מוקפצת הודעה ומייד לאחריה היה נפתח גם התפריט.

(הערת אגב:  אמנם בפוסט זה אני מתייחס רק לאירוע contextmenu, אבל חשוב לציין שישנו גם attribute של html5 באותו שם,  שבאמצעותו ניתן להוסיף לתפריט אפשרויות כרצונכם, אבל לפני שאתם רצים להשתמש בו שימו לב כי הוא נתמך כרגע רק בפיירפוקס)

אז למה זה טוב?

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

או שאולי תרצו לעשות משהו בסגנון מה שראיתי היום:

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

למעשה זוהי דוגמה מעולה ליצירת חווית משתמש איכותית.

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

הנה למשל מה שמצאתי בתיקיה PNG format – בדיוק מה שהייתי צריך:

ככה עושים UX מוצלח!

עד כאן להיום, תודה שקראתם, ואם אתם מעוניינים לקבל עדכון במייל כשאפרסם פוסט חדש – שלחו לכאן את כתובת המייל שלכם עם המילה “עדכונים” בנושא ההודעה.

להתראות בפוסט הבא