كيفية إضافة اختصارات لوحة المفاتيح إلى موقع الويب الخاص بك
اختصارات لوحة المفاتيح الحب؟ يمكنهم مساعدتك على توفير الكثير من الوقت ، أليس كذلك؟ هل ترغب في إضافة اختصارات لوحة المفاتيح إلى موقع الويب الخاص بك ، لصالح زوار موقعك؟ سيؤدي ذلك إلى تحسين إمكانية الوصول إلى موقعك وتصفحه بشكل كبير.
في هذا المنشور ، سأقدم دليلًا سريعًا حول كيفية إضافة اختصارات إلى صفحة الويب الخاصة بك باستخدام مكتبة JavaScript تسمى Mousetrap. مع مصيدة فئران يمكنك تعيين المفاتيح مثل Shift و Ctrl و Alt و Options و Command to أداء وظائف معينة في موقع الويب الخاص بك. كما أنه يعمل بشكل جيد عبر المتصفحات القديمة.
المزيد عن هونغكيات:
- إنشاء تلميح الأدوات المتحركة بسهولة مع Hint.Css
- بناء دليل خطوة بخطوة باستخدام Intro.Js [البرنامج التعليمي]
- كيفية نمط شريط التمرير مجموعة HTML5
- كيفية استخدام ملف تعريف الارتباط & HTML5 localstorage
ابدء
ابدأ بإنشاء مستند HTML جديد مع المحتوى ، وربط مكتبة "مصيدة فئران". سأستخدم مكتبة "مصيدة فئران" المستضافة في CDNjs بحيث يتم تقديم المكتبة من خلال شبكة CloudFlare ، والتي ينبغي أن تكون أسرع من خادمنا الخاص
الآن سوف نستخدم مصيدة فئران 'ربط' طريقة لإرفاق مفاتيح لوحة المفاتيح مع وظيفة. يمكنك تعيين مفتاح واحد أو مجموعة مفاتيح أو مفاتيح تسلسل, فمثلا
مفتاح واحد
في هذا المثال ، نربط s.
Mousetrap.bind ('s' ، الدالة (e) // your function here ...)؛ مفتاح الجمع
في هذا المثال ، نربط Ctrl و s. ستحتاج إلى الضغط على المفتاحين معاً للقيام بالوظيفة المعينة.
Mousetrap.bind ('ctrl + s' ، function (e) // your function here…)؛ مفتاح التسلسل
في هذا المثال ، سيحتاج المستخدم إلى الضغط على g ثم الصورة بعد ذلك. إذا كنت تقوم بتطوير لعبة قائمة على الويب ، فقد يكون ذلك مفيدًا لإضافة مجموعة مفاتيح سرية مخفية.
Mousetrap.bind ('g s' ، function (e) // your function here…)؛ باستخدام مصيدة فئران
سنقوم ببناء صفحة ويب بسيطة مع اثنين من اختصارات لوحة المفاتيح التي تمكن المستخدمين من الوصول إلى بعض الوظائف على الموقع. سنستخدم jQuery لتسهيل التعامل مع مستند HTML وتحديد عناصر HTML.
لنبدأ بشيء سهل.
سنقوم بربط مفتاح يتيح للمستخدم التركيز على حقل إدخال البحث بسرعة.
1. فيما يلي ترميز HTML للبحث مع هوية شخصية.
2. بعد ذلك ، نقوم بإنشاء وظيفة ستركز على إدخال البحث.
search search () var search = $ ('# search')؛ search.val (")؛ search.focus ()؛ 3. أخيرًا ، نربط مفتاحًا لتشغيل الوظيفة.
Mousetrap.bind ('/' ، بحث) ؛ 4. هذا هو. يجب أن تكون الآن قادرًا على الانتقال إلى إدخال البحث بالضغط على الزر /.
بالتناوب ، يمكنك أيضًا ربط مجموعة المفاتيح ، Ctrl / Cmd + F ، وهو اختصار رئيسي شائع يُستخدم للبحث في العديد من تطبيقات سطح المكتب:
Mousetrap.bind (['command + f'، 'ctrl + f']، search)؛
باستخدام مصيدة فئران مع Bootstrap
من السهل دمج المصيدة مع إطار عمل ، على سبيل المثال ، Bootstrap. في هذا المثال الثاني ، سنعرض نافذة مساعدة تعرض قائمة من الاختصارات المتاحة على الموقع. هنا ، أنا أختار Bootstrap Modal لتقديم القائمة وتعيين؟ مفتاح لإظهار الوسائط.
على الرغم من أن ؟ يمكن الوصول إليها فقط مع مفتاح Shift ، ملزمة فقط؟ المفتاح يكفي.
Mousetrap.bind ('؟'، function () $ ('# help'). modal ('show')؛)؛ الآن عندما تضغط؟ المفتاح ، ستظهر نافذة منبثقة.
نصيحة لربط فعالة
مع مرور الوقت ، قد تبدأ مجموعتك المتزايدة من اختصارات لوحة المفاتيح في تشويش التعليمات البرمجية الخاصة بك. إذا حدث هذا ، فهناك ملحق يمكنك إضافته لإنشاء “مفتاح ملزمة” رموز أكثر كفاءة. ومن اسمه “ربط القاموس”. أضف هذا الامتداد بعد مكتبة مصيدة فئران الأساسية, mousetrap.min.js.
الآن ، بدلاً من فصل كل رابط رئيسي ، يمكننا تجميعها بدقة في ملف واحد .ربط() الطريقة ، مثل ذلك:
Mousetrap.bind ('/': search، 't': tweet، '؟': function modal () $ ('# help'). modal ('show')؛، 'j': function next ( ) highLight ('j')، 'k': function prev () highLight ('k'))؛ من أجل تطبيق أكثر تقدمًا ، يمكنك مشاهدة العرض التوضيحي الذي قمت بإنشائه. في العرض التوضيحي ، يمكنك الضغط على المفتاح J أو K لتمييز المنشور ، ثم اضغط T لتغريد المنشور الحالي الذي قمت بتمييزه.
- عرض تجريبي
- تحميل
