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

- visibility ۱ mode_comment

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

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

مدیریت ساده رویدادها در jQuery یکی از ویژگی هایی هست که jQuery رو به یکی از معروفترین کتابخانه های Javascript تبدیل کرده. هر برنامه ای متناسب با رویداد ها اعمال و رفتار مورد نظر شما رو انجام میده. در این بخش تعدادی ترفند و روش در اختیارتون قرار میگیره که میتونین با استفاده از اون زمانتون رو ذخیره کنید و مشکلاتتون رو حل کنید.

ترفند 25 : به عنصر html کلاس js رو نسبت بدین

برنامه های تحت وب اغلب از کدهای Javascript زیادی استفاده میکنن که با استفاده از اون با کاربران تعامل برقرار میکنن. در صورتی که Javascript میتونه غیرفعال بشه و یا در دسترس نباشه. در این حالت شما باید دقت داشته باشید که برنامتون حداقل کارایی رو برای کاربران داشته باشه و قابل استفاده باشه.

یک ترفند در این زمینه وجود داره که میتونه کار رو برای شما ساده تر کنه و اون اینه که به عنصر html یک کلاس نسبت بدین. با استفاده از این کلاس و CSS شما میتونین عنصر ها رو بسته به نیاز خودتون مخفی کنید و یا نمایش بدید. یعنی کاری کنید که تا اون کلاس موجود نباشه عناصرتون مخفی باشه. زمانی که Javascript فعال باشه کلاس js اضافه میشه و شما میتونین با استفاده از این نشانه عنصر مورد نظرتون رو نمایش بدین.

کد HTML:

کد CSS:

کد JS:

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

ترفند 26 : برای المنتهایی که هنوز وجود ندارن ، رویداد تعریف کنید

برنامه نویسان تازه کاری که از jQuery استفاد میکنن ، گاها به موقعیتهایی میرسن که المنتهای جدیدی رو با استفاده از درخواست Ajax از سرور میگیرن و در صفحه موجود قرار میدن. در این مواقع این افراد میبینن که المنتهایی که با Ajax لود شدن ، رویدادهایی که براشون تعریف شده اجرا نمیشن. jQuery یک مکانیزم قدرتمند برای مدیریت رویدادها داره که با استفاده از متد on این مشکل رو حل میکنه.

کدهای HTML زیر رو در نظر بگیرید:

اول متغیری رو میسازیم و ul رو به اون نسبت میدیم:

بعد از اون یک رویداد کلیک با استفاده از متد on برای li هایی که درون این list هستن رو تعریف میکنیم:

اگر از این روش استفاده کنید ، اگر بعدا توسط Ajax یا ... li جدیدی به این list اضافه شد ، این رویداد برای اون نیز اجرا میشه.

دیدید که تونستیم با استفاده از متد on رویداد رو بهتر مدیریت کنیم.

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

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

یا علی

Source

comment دیدگاه کاربران
MohamadHosein

جالب بود این ترفند26 تشکر ، مخصوصاً اینکه برای کنترل هایی که بعد ایجاد میشه رویداد درنظر گرفته میشه جالب تر کرده بود قضیه رو.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.