כיצד להוסיף קיצורי מקשים לאתר האינטרנט שלך

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

בהודעה זו, אני אתן מדריך מהיר על איך להוסיף קיצורי דרך לדף האינטרנט שלך באמצעות ספריית JavaScript בשם Mousetrap. עם מלכודת עכברים אתה יכול מקשים ייעודיים כמו Shift, Ctrl, Alt, אפשרויות, ואת הפקודה אל לבצע פונקציות מסוימות באתר האינטרנט שלך. זה גם עובד היטב על פני דפדפנים ישנים.

עוד על הונגקיאט:

• יצירת tooltip אנימציה בקלות עם Hint.Css
• בניית מדריך צעד אחר צעד באמצעות Intro.Js [מדריך]
• כיצד סגנון מחוון טווח HTML5
• כיצד להשתמש עוגיות & HTML5 localstorage

מתחילים

התחל על ידי יצירת מסמך HTML חדש יחד עם התוכן, וקישור ספריית עכברים. אני אשתמש Mosetrap הספרייה מתארח CDNjs כך הספריה יוגש באמצעות רשת CloudFlare, אשר אמור להיות מהיר יותר מאשר השרת שלנו

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

מפתח יחיד

בדוגמה זו, אנו לאגד את s.

 Mousetrap.bind ('s', פונקציה (ה) // הפונקציה שלך כאן ...); 

מפתח שילוב

בדוגמה זו, אנו נקשר את Ctrl ו- s. יהיה עליך ללחוץ על שני keyltogether כדי לבצע את הפונקציה המיועדת.

 Mousetrap.bind ('ctrl + s', פונקציה (ה) // הפונקציה שלך כאן ...); 

מפתח רצף

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

 Mousetrap.bind ('g s', פונקציה (ה) // הפונקציה שלך כאן ...); 

באמצעות מלכודת עכברים

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

בואו נתחיל עם משהו קל.

אנחנו הולכים לקשור מפתח שיאפשר למשתמש להתמקד בשדה קלט החיפוש במהירות.

1. להלן סימון HTML עבור החיפוש יחד עם id.

2. לאחר מכן, אנו יוצרים פונקציה שתתמקד קלט החיפוש.

 search search () var search = $ ('# search'); search.val ("); search.focus (); 

3. לבסוף, אנחנו לאגד מפתח כדי להפעיל את הפונקציה.

 Mousetrap.bind ('/', חיפוש); 

4. זה Thats. עכשיו אתה אמור להיות מסוגל לנווט את קלט החיפוש על ידי לחיצה על /.

לחלופין, ייתכן שתחבר גם את צירוף המקשים, Ctrl / Cmd + F, שהוא קיצור דרך פופולרי המשמש לחיפוש ביישומי שולחן עבודה רבים:

 Mousetrap.bind (['+', 'ctrl + f'], חיפוש); 

באמצעות עכברים עם Bootstrap

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

למרות ש ? הוא נגיש רק עם מקש Shift, מחייב רק את? המפתח מספיק.

 Mousetrap.bind ('?', Function () $ ('# help') modal ('show');); 

עכשיו כאשר אתה מכה את? , יופיע חלון קופץ.

עצה עבור מחייב יעיל

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

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

 ('Show'), 'j': הפונקציה הבאה ('' 'עזרה', 't': ציוץ, '?': ) highLight ('j'), 'k': function prev () highLight ('k'); 

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

• הצג הדגמה
• הורד