• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

mousetrap : کتابخانه ای ساده برای کنترل میانبرهای کیبورد

0 1182 ۶ فروردین ۹۴

در این مطلب میخوام یک ابزار بنام mousetrap رو خدمت شما معرفی کنم و نحوه استفاده از اونو آموزش بدم.

mousetrap

با استفاده از این ابزار قدرتمند میتونین به سادگی هر چه تمامتر برای هر عملی در سایتتون یک ShortCut ( کلید میانبر ) قرار بدین و رابط کاربری ( User Experience ) سایتتون رو ارتقاء بدین. مثلا یک میانبر برای باز شدن منو ، یک میانبر برای خارج شدن و ...

حجم این ابزار خیلی کم هست و از همه مرورگرها از جمله IE6 به بالا پشتیبانی میکنه و میتونین با خیال راحت از اون استفاده کنید. این کتابخانه بی نیاز از کتابخانه های دیگر است و میتونین به راحتی از اون استفاده کنید.

در فایل دمو چند متن نوشته شده ، هر وقت که اون دکمه هارو به همون ترتیبی که گفته شده فشار بدین ، alert مرتبط داده میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به mousetrap.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اون استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم و کدهای HTML و CSS رو نوشتیم.

با استفاده از این کتابخانه میتونین بر دکمه های زیر کنترل داشته باشین :

mousetrap1

برای استفاده از این ابزار باید از شئ Mousetrap استفاده کنید و متد bind رو برای اون فراخوانی کنید. بصورت زیر :

حالا باید دو تا چیز رو درون این متد مشخص کنید :

  1. دکمه ای که قصد داریم برای آن میانبر قرار دهیم
  2. تابعی که با زدن این دکمه باید اجرا بشه

ساختار کلی بصورت زیر هست :

میبینید که در ابتدا باید درون ' ' دکمه مورد نظر رو بنویسید و بعد از اون یک کاما قرار بدین و تابعی که قراره با زدن این دکمه کدهاش اجرا بشه رو قرار بدین. برای مثال در بالا من دکمه 4 رو قرار دادم ، هر زمان که دکمه 4 بر روی کیبورد توسط کاربر فشرده بشه ، یک alert داده میشه و پیغام مورد نظر داده میشه.

شما میتونین هر دکمه ای که در بالا گفتم رو قرار بدین ، مثلا del ، shift و ...

شما میتونین از دکمه های ترکیبی هم استفاده کنید. فرض کنید میخواید کاری کنید که با نگه داشتن دکمه های ترکیبی Ctrl و Shift و k یک alert نمایش داده بشه. برای اینکار باید این دکمه ها رو قرار بدین و بین اونا + بزارین. بصورت زیر :

همونطور که میدونین در کامپیوترهای اپل دکمه ctrl وجود نداره و بجای اون Command قرار داره. برای اینکه کاری کنید که چیزی قرار بدین که هم در ویندوز و هم در مک بخوبی کار کنه و شبیه به هم باشه میتونین از کلمه mod استفاده کنید. بصورت زیر :

برای اینکه کاری کنید که با زدن چند دکمه پشت سر هم ، یک تابع اجرا بشه ، میتونین اونا رو با space از هم جدا کنید. مثلا فرض کنید میخواید با زدن دکمه های بالا ، پایین ، چپ و راست بر روی کیبورد یک alert نشون داده بشه. برای اینکار میتونین بصورت زیر انجامش بدین :

بعضی از کلمه ها مثل علامت سوال ( ? ) نیازه که حتما shift رو هم فشار بدین. این ابزار این موارد رو هم پشتیبانی میکنه و برای اینکه با زدن دکمه علامت سوال یک alert نشون داده بشه ، میتونین بصورت زیر عمل کنید :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram