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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 300 ۸ آبان ۹۴

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

موضوع چهارم : ماهر شدن در JQuery

ترفند 55 : کار کردن با jQuery Callback

متد $.Callbacks در jQuery یک راه و روش قدرمند رو در اختیارتون قرار میده که با استفاده از اون میتونین تعداد زیادی از Callback هارو مدیریت کنید. شما میتونین اونا رو اضافه ، حذف و یا غیرفعال کنید و اونا رو در مواقعی بکار بگیرین. در اینجا نحوه استفاده از اون رو بهتون نشون میدم:

کدهای HTML:

کدهای JS:

مثال اول : با استفاده از شئ Callback

در ابتدا یک شئ جدید ازنوع callback میسازیم:

یک Callback به اون اضافه میکنیم:

میبینید که با استفاده از متد add یک تابع رو به اون اضافه کردیم که وظیفش چاپ کردن چیزی در Console هست. یک مورد دیگه هم اضافه میکنیم:

این موردی که اضافه کردیم نقش اضافه کردن چند خط تیره داره و برای خوانایی بیشتر هست. شما میتونین با استفاده از متد fire این لیستی از callback ها که قرار دادیم رو اجرا کنید. میخاهیم کاری کنیم که با کلیک بر روی دکمه اول ، این callback ها اجرا بشه:

اگر این کد رو اجرا کنید ، خروجی بصورت زیر خواهد بود:

مثال دوم : با استفاده از flag

میخایم کاری کنیم که اگر عملیاتی که میخایم انجام بدیم با False روبرو شد ، callback متوقف بشه. در ابتدا بصورت زیر عمل میکنیم:

حالا یک callback اضافه میکنیم:

میبینید که درون تابع چک میشه که چک باکس تیک خورده یا خیر. اگر خورده باشه که True داده میشه و callback متوقف نمیشه ولی اگر تیک نخورده باشه ، باعث میشه که لیست callback ها تا پایان ادامه پیدا نکنه.

حالا میخایم کاری کنیم که با کلیک بر روی دکمه دوم ، این callback هایی که ساختیم اجرا بشن:

این کار باعث میشه که اگر چک باکس تیک خورده باشه متن چاپ بشه و اگر نخورده باشه متنی چاپ نشه.

ترفند 56 : سیاه و سفید کردن تصاویر

در HTML5 المنتی بنام canvas معرفی شد. با استفاده از این المنت میتونیم در پیکسلهای تصاویر ، ترنسفرمها و کشیدن اشکال مختلف دستکاری کنیم و مدیریت داشته باشیم. یک ترفند ساده که میتونیم از canvas استفاده کنیم ، اینه که تصاویرمون رو با استفاده از اون سیاه و سفید کنیم.

در ابتدا باید عرض کنم که برای اینکه این مثال انجام بشه باید اون رو بر روی یک وب سرور همانند Apache اجرا کنید.

کدهای HTML:

کدهای CSS:

در ابتدا متغیرهایی رو تعریف میکنیم:

یک متغیر از نوع تصویر ساختیم و همچنین canvas رو انتخاب و در متغیری قرار دادیم. با استفاده از getContext هم canvas رو برای کار کردن 2 بعدی بر روی اون آماده کردیم.

بعد از اون آدرس عکس مورد نظر رو به src تصویر دادیم و گفتیم که هر زمان که تصویر لود شد اونو در canvas بکشه و قرار بده. حالا میخایم کاری کنیم که زمانی که روی دکمه مورد نظر کلیک شد ، تمامی پیکسلهای تصویر مورد نظر سیاه و سفید بشن:

با استفاده از این روش عکس شما سیاه سفید میشه. زمانی که تصویرتون در canvas قرار میگیره از اون به بعد میتونین به پیکسلهای اون با استفاده از آرایه دسترسی داشته باشید و اعمال مورد نظرتون روی اونا انجام بدین. در اینجا بسادگی میزان قرمز و آبی و سبز رو میانگین گرفتیم و به اون نسبت دادیم. با استفاده از این لینک میتونین اطلاعات بیشتری در مورد سیاه و سفید کردن تصاویر و API های اون در Javascript آشنا بشید.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram