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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 310 ۲۱ مهر ۹۴

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

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

ترفند 33 : ساخت رویدادهای سفارشی

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

کدهای HTML:

کدهای Javascript:

در ابتدا المنتهارو در متغیرهایی قرار میدیم:

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

میبینید که 3 تا رویداد رو برای div تعریف کردیم و درون اونها Console قرار دادیم که به محض اینکه فراخوانی بشن اون کدها اجرا بشه و نتیجه مورد نظر انجام شه.

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

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

موضوع چهارم : Ajax

Ajax یک نقش اساسی رو در دنیای وب امروز برعهده داره. Ajax به شما اجازه میده که داده هایی که نیاز هست فرستاده بشن رو بفرستید ، پهنای باند شما رو حفظ میکنه و همچنین سرعت رو بالا میبره. در ذهن کاربران هم مثل یک اپلیکیشن ویندوزی رفتار میکنه که رفرش نمیشه. در این موضوع ترفندهایی در اختیارتون قرار میگیره که میتونین با استفاده از اونا کیفیت برنامتون رو ارتقاء بدین.

ترفند 34 : نمایش سایز فایل بعد از لینک دانلود

آیا شما میدونستید که بوسیله فرستادن درخواست HEAD با Ajax بدون نیاز به دانلود فایل ، میشه سایز اون رو فهمید؟ این کار با استفاده از Ajax بسیار آسونه:

کدهای HTML:

میبینید که همه لینکها یک کلاس مشخص دارن.

کدهای JS:

میبینید که در ابتدا همه لینکارو انتخاب کردیم و بعد از اون یک سری کد رو با استفاده از متد each برای همشون اجرا کردیم. در هر تکرار حلقه هم یک درخواست Ajax از نوع HEAD فرستاده میشه و در صورت تکمیل شدن ، متد complete اجرا میشه و سایز اون مورد رو با استفاده از Content-Length دریافت میکنن و اونو به لینکها اضافه میکنن. این عددی که دریافت میشه خیلی معنا نداره و بهمین دلیل اونو به تابع humanize پاس میدیم تا به اون معنا و مفهموم بهتری بده:

این تابع یک ورودی عددی که همون سایز فایل هست رو میگیره و یک مقدار بصورت KB یا MB یا ... برمیگردونه که فهمیدنش توسط ما بیشتر میشه. درخواست های از نوع HEAD بسیار سریع و سبک هستن. پاسخی که از سرور دریافت میشه بصورت زیر هست:

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram