یادداشت‌ها

کنترل رویدادهای صفحه کلید، موس و صفحات لمسی

افزودن میانبر صفحه‌کلید یا لمسی برای اعمال پرکاربرد در سایت شما، موجب افزایش رضایتمندی کاربر می‌گردد. در ادامه به معرفی چند پلاگین در این خصوص می‌پردازیم...

رویدادهای صفحه‌کلید (Keyboard)

• jwerty و Mousetrap و keymaster.js و Kibo و Combokeys
  چند کتابخانه مستقل از سایر کتابخانه‌ها برای کنترل رخدادهای صفحه کلید (حتی کلیدهای ترکیبی) که کمتر از 2 کیلوبایت (minified and gzipped) حجم دارند. البته Mousetrap و keymaster و Combokeys این حسن را دارند که می‌تواند از تداخل اجرای شورتکات‌ها در زمان تایپ کاربر در یک ورودی متنی (input, textarea) جلوگیری کنند.
• Keypress
  این کتابخانه نیز وابسته به جی‌کوئری و ... نیست اما حجم بالاتری نسبت به موارد فوق دارد (حدود 9 کیلوبایت) و به تبع آن محاسنی دارد مثلا می‌تواند برای المان‌های خاص یا هر زمانی که بخواهید، رویداد را فعال/غیرفعال کنید و ...
• KeyboardJS
  کتابخانه‌های فوق همگی امکان استفاده از کلیدهای ترکیبی را داشتند اما این کتابخانه این امکان را به صورت پیشرفته‌تری برای شما فراهم کرده است. مثلا می‌توانید بگویید اگر کلید a و b همزمان فشرده شد و رها شد و بعد از آن کلید c و d همزمان فشرده شد، فلان تابع فراخوانی شود.
• Shortcuts (jQuery plugin)
  یک پلاگین بسیار سبک جی‌کوئری برای کار با رویدادهای صفحه‌کلید که کار با آن نیز بسیار ساده است.

رویدادهای موس (Mouse)

تقریبا کمتر سایتی است که از کتابخانه‌های معروفی همچون جی‌کوئری یا موتولز یا امثال آنها استفاده نکند و این کتابخانه‌ها نیز عمدتا رویدادهای موس همچون کلیک، دوبارکلیک (دبل‌کلیک)، کلیک راست و وسط، پایین بودن دکمه موس، رها شدن دکمه موس، حرکت موس از موقعیت خاص و ... را به خوبی می‌توانند مدیریت کنند.
با وجود این کتابخانه مستقل Mouse نیز برای کار تخصصی با موس قابل استفاده است و 18 رویداد موس را می‌تواند مدیریت کند.

در مطلب drag & drop نیز پلاگین‌هایی برای کشیدن المان‌های صفحه با موس و رها کردن آن در مکان از پیش تعیین شده (که برای مرتب سازی و ... کاربرد دارد) معرفی کردم.
همچنین پلاگین زیبای jquery-overlap نیز امکان انتخاب چند المان با موس را می‌دهد. درست مشابه زمانی که می‌خواهیم با کمک موس خالی، چندین فایل و پوشه را در سیستم‌عامل انتخاب کنیم.

رویدادهای مربوط به صفحات لمسی (Touch screen)

صفحات لمسی روز به روز در حال گسترش هستند و لمس، جای موس را می‌گیرد لذا پیش‌بینی می‌شود در آینده موسی وجود نخواهد داشت! شاید به همین دلیل است که پلاگین‌های بسیار زیادی برای افزودن کار با صفحات لمسی به صفحات وب تهیه شده دارد.

thumbs.js یک کد نمونه بسیار ساده و سبک برای افزودن سه رویداد touchstart, touchend, touchmove به صفحه است. که البته شاید این چندخط کد ساده جایگزین بهتری برای آن باشد :)

برای کنترل رویدادهای موس در وسایل لمسی، می‌توانید به این کتابخانه jQuery Mobile نگاهی بیندازید که یکی از بهترین و پرقابلیت‌ترین کتابخانه‌ها برای کنترل رویدادهای صفحات وب هنگام کار با وسایل دارای صفحات لمسی است.

همچنین یک لیست 11 تایی در اینجا، یک لیست 10 تایی نیز در اینجا و یک لیست 18 تایی در اینجا معرفی شده است.

پروژه PatternLock نیز امکان تعریف قفل الگویی (ترسیمی) یا Pattern Lock را به سادگی فراهم کرده است. Pattern Lock یکی از شیوه‌های قفل وسایل اندرویدی است که برای باز کردن قفل، کاربر مجبور است تعدادی نقطه را به ترتیب خاصی به هم متصل کند تا قفل باز شود.

پروژه mgo-mousetrap نیز برای کنترل بهتر رویدادهای موس و کیبورد در انگولرجی‌اس تهیه شده است.

1. بکارگیری pushState و replaceState در برنامه نویسی سایت های ای جکسی
2. ساخت اپلیکیشن های کلاینتی با AngularJS گوگل
3. امنیت در انگولر جی اس
4. کشیدن و انداختن (رها کردن)