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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ترفندهای پیشرفته jQuery (قسمت 15)

1 617 ۵ مهر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع سوم : رویدادها

ترفند 29 : کار کردن با رویدادهای لمسی

بعضی اوقات برای تعامل وبسایت با کاربران استفاده از رویدادهای لمسی نیاز هست. کار کردن با رویدادهای لمسی خیلی با رویدادهای مربوط به ماوس متفاوت نیست. رویداد کلیک و هاور برای موبایل هم شبیه سازی شده هست ، اما اگر شما به عملیات پیشرفته تری همانند پیدا کردن اشاره کاربران و درگ کردن نیاز دارید ، شما باید کار بیشتری رو انجام بدین. بعنوان مثال کد زیر رو در نظر بگیرید:

کدهای JS:

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

میبینید که در ابتدا تعدادی متغیر رو تعریف کردیم. یک div با id = ball ساختیم و در body قرار دادیم. بعد از اون هم دو آرایه رو قرار دادیم.

قرار دادن رویداد برای ماوس و touch:

همونطور که دیدین در ابتدا با استفاده از متد on برای mousedown و touchstart یک Event Handler قرار دادیم. بعد از اون با استفاده از متد preventDefault از رویداد پیش فرض جلوگیری کردیم و قصد داریم که خودمون براش تعریف کنیم.

در ابتدا باید رویداد لمسی رو بصورت نرمال قرار بدین.

بعد از اون موقعیت مکانی اولیه و موقعیت مکانی توپ رو در آرایه های که در ابتدا قرار دادیم ، میزاریم. بعد از اون هم با استفاده از متد css مکانهای جدید رو به توپ نسبت دادیم تا توپ در مکان خودش قرار بگیره.

بعد از اون هم زمانی که رویداد ماوس یا touch به پایان رسید ، رویدادهای سنگین رو پاک میکنیم تا حافظه سبک بشه:

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

ترفند 30 : با رویدادها آشنایی کامل داشته باشید

jQuery مدیریت رویدادها رو در نسخه 1.7 با استفاده از معرفی متدهای on و off ساده و آسان کرده. با استفاده از این متدها میتونین ترفندهای جالبی رو پیاده سازی کنید ، اما آیا شما با استفاده صحیح از این متدها آشنایی دارید؟

کدهای HTML:

کدهای JS:

در ابتدا المنتها رو در متغیرهایی میریزیم و اونارو ذخیره میکنیم:

مورد اول - مدیریت رویداد مستقیم:

با استفاده از کد ، زمانی که بر روی دکمه  کلیک شه ، یک متن در Console نمایش داده میشه.

مورد دوم - مدیریت تعدادی رویداد بصورت مستقیم:

میبینید که همزمان هم برای ورود و هم برای خروج ماوس به المنت مورد نظر رویداد تعریف کردیم و هر دوی اونا یک متن رو در Console نمایش میدن.

مورد سوم - فرستادن اطلاعات و داده:

میبینید که در ابتدا یک عدد تصادفی ساخته میشه و همون عدد بصورت ثابت به تابع فرستاده میشه و در Console نمایش داده میشه.

مورد چهارم - استفاده از رویداد همراه با namespace:

اگر در مورد فضای نام در jQuery خواستید بیشتر بدونید ، میتونید از این لینک استفاده کنید.

مورد پنجم - استفاده از event delegation:

مورد ششم - Passing an event map:

میبینید که با استفاده از این روش میتونین برای هر رویداد کدهای جداگونه ای قرار بدین.

متد on متدهای bind ، live و delegate رو متحد و یکی کرده و میتونین بجای اونا از on استفاده کنید.

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

موفق و پیروز باشید

یا علی

Source

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

دیدگاه ها یک نظر ارسال شده است.

  • ‏‏
    MohamadHosein(۱۷ دی ۱۳۹۴)

    سلام
    من برای ترفند 29 کدهامو به این صورت نوشتم اما جواب نگرفتم :

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram