آموزش ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery Reviewed by صابر بوستانی on Sep 1Rating:

آموزش جی کوئری

در این مطلب آموزشی قصد داریم طریقه ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery رو از سایت سورس باران آموزش بدیم. کسانی که با Javascript و jQuery و … کار کرده باشند با رویدادهای click و dblclick آشنا هستند. رویداد click زمانی اتفاق میوفته که کاربر یکبار روی عنصر مورد نظر کلیک کنه. رویداد dblclick زمانی اتفاق میوفته که کاربر روی عنصر مورد نظر دو بار کلیک کنه. گاهی اوقات برام پیش اومده که بخوام وقتی کاربر روی عنصری سه بار کلیک کرد ، رویدادی اتفاق بیوفته. اما چنین رویدادی از قبل تعریف نشده و یا خودمون باید براش برنامه بنویسیم یا از برنامه هایی که دیگران نوشتن استفاده کنیم. آموزش کامل ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery در ادامه مطلب موجود می باشد.

جهت مشاهده آموزش ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery  به ادامه مطلب مراجعه نمایید.

دمو

در این دمو سه مربع به رنگهای قرمز و سبز و آبی موجوده که به ترتیب روی آنها عنصر ۱ و عنصر ۲ و عنصر ۳ نوشته شده. با سه بار کلیک بر روی هر کدام از این عناصر ، جمله ای در مستطیل سیاه رنگ پایینی نوشته میشه. دقت کنید که باید این سه کلیک را پشت سر هم انجام بدین و بین اونا نباید زیاد فاصله زمانی باشه. بطور پیش فرض کاربر باید این سه کلیک رو در مدت ۱ ثانیه انجام بده. این زمان رو میشه کم و زیاد کرد. در این مورد توضیح خواهم داد.

ابتدا کدهای HTML :

سه تا Div همون مربع ها هستن و اون تگ pre هم نتایج رو نشون میده.

 

کدهای CSS :

تا اینجا ظاهرشو ساختیم. مرحله بعد اینه که کتابخانه jQuery رو به سندمون اضافه کنیم. برای این کار به صورت زیر عمل کنید :

 

خب در مرحله بعد یه فایل جاوااسکریپت به نام tripleclick.js ایجاد کنید و کدهای زیر رو درونش قرار بدین :

 همونطور که در خط ۹ میبینین مقدار پیش فرض threshold برابر با ۱۰۰۰ میلی ثانیه هست. یعنی کاربر باید ۳ تا کلیکشو در طول ۱۰۰۰ میلی ثانیه یا ۱ ثانیه انجام بده. این مقدار قابل تغییر دادن هست که در انتها در موردش توضیح میدم.

بعد از اینکار باید این فایلی که درست کردین رو به سندتون اضافه کنین. دقت کنین که کد زیر رو باید بعد از خطی قرار بدین که jQuery رو قرار دادین.

 

تا اینجا بیشتر کارامونو انجام دادیم. حالا باید از پلاگینی که قرار دادیم استفاده کنیم. به دو صورت میتونین از اون استفاده کنین که تقریبا با هم فرقی ندارن و با هم کدوم که راحت تر بودین ، از اون استفاده کنین :

روش اول :

 

روش دوم :

 

میبینید که دو روش همه چیزشون شبیه به هم هست ، با این تفاوت که در اولی از bind استفاه شده و در دومی از on. اگر با نحوه ی کار کرد on و bind آشنا نیستین میتونین در گوگل سرچ کنید. من در اینجا روش اول رو مقداری براتون توضیح میدم. ابتدا باید به وسیله ی $(“#element”) عنصر مورد نظرتون رو انتخاب ( Select ) کنید. در قسمت بعدی از تابع bind استفاده شده. اگه بخوام بطور ساده کارکردشو براتون بگم ، اینه که مشخص میکنه هر وقت رویدادی اتفاق افتاد ، تابعی اجرا بشه و دستورات درون اون خونده بشه و انجام بشه. در اینجا tripleclick نوشتیم. یعنی هر وقت سه بار کلیک شد ، اون تابع و کدهاش باید انجام بشن. در قسمت Actions هم ، کدهایی که میخوایم اجرا بشن رو قرار میدیم.

 

حالا برای اینکه اون مقدار پیش فرض Threshold رو تغییر بدیم باید به صورت زیر عمل کنیم :

در اینجا ما Threshold رو برابر با ۲۰۰۰ میلی ثانیه ( ۲ ثانیه ) قرار دادیم. یعنی اینکه کاربر میتونه در مدت ۲ ثانیه سه بار کلیکشو انجام بده. اگه بیشتر از ۲ ثانیه طول بکشه ، اون کدها اجرا نمیشن.

خب اینم از نحوه ی استفاده از این پلاگین.حالا بریم و کدهامونو کامل کنیم. برای این کار باید در فایل HTML خودمون بعد از قرار دادن jQuery و tripleclick.js کدهای زیر رو قرار بدین :

 

 

برای تازه شدن دیر نیست،موفق و پیروز باشید.

سورس باران دات کام