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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 227 ۱۳ آبان ۹۴

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

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

ترفند 57 : ساختن یک انتخابگر کاذب

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

کدهای HTML:

کدهای JS:

برای اضافه کردن یک انتخابگر جدید باید نام مورد نظرتون رو به خصوصیت $.expr.pseudos نسبت بدین:

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

میبینید که اومدیم گفتیم از بین اون المنتهایی که کلاس ipsum رو دارن ، اونایی که شامل lorem هستن رو انتخاب کن و بعد از اون با استفاده از length تعداد اونا رو چاپ کردیم. خروجی در Console:

اینو بیاد داشته باشید که از انتخابگرهای ساختگی نمیتونن در querySelector() مورد استفاده قرار بگیرن. همچنین سرعت اجرای این انتخابگرها بدلیل پیچیدگی از انتخابگرهای پیش فرض کمتره.

ترفند 58 : ساختن توابع easing دلخواه

یکی دیگر از مواردی که jQuery به شما اجازه میده اونو گسترش بدین ، در زمینه ساختن توابع Easing برای انیمیشنها هست. در اینجا روش کلی انجام اونو براتون قرار میدم:

کد HTML:

کد JS:

با روش و فرمولهای شبیه به فرمول زیر میتونیم یک تابع easing دلخواه برای خودمون بسازیم. بعضی از این توابع از قواعد فیزیک و ... استفاده میکنن:

حالا بصورت زیر از اون استفاده میکنیم:

در ابتدا تصویر مورد نظر رو در متغیر قرار میدیم. بعد از اون میخایم با استفاده از دکمه هایی که داریم اونو مخفی و نمایان کنیم:

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

این تابع easing که ساختیم یک حالت پرتاب شدن رو شبیه سازی میکنه. این کد از پلاگین jQuery Easing کپی شده. میتونین لیست کامل توابع easing رو در این سایت ببینید.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram