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

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



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Material-Preloader : پلاگین jQuery برای ساخت لودر زیبا

2 1318 ۱۰ فروردین ۹۴

در این مطلب میخوام یک پلاگین jQuery بنام Material-Preloader رو خدمت شما معرفی کنم و اونو آموزش بدم.

preloader

با استفاده از این پلاگین میتونین براحتی هر چه تمامتر لودر زیبایی رو در بالا و یا پایین سایتتون قرار بدین و به ظاهر سایتتون زیبایی بیشتری ببخشید.

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به materialPreloader.min.js و jquery.min.js و materialPreloader.min.css نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

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

میبینید که این نمونه رو در یک متغیر بنام preloader قرار دادیم. برای اینکه این لودر رو فعال کنیم باید اون رو on کنیم و برای غیرفعال کردنش باید اونو off کنیم. بصورت زیر :

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

  •  position : با استفاده از این ابزار میتونین مکان قرار گیری نوار رو مشخص کنید که دو مقدار top و bottom رو دریافت میکنه
  • height : ارتفاع نوار رو مشخص میکند
  • col_1 و col_2 و col_3 و col_4 : با استفاده از این ویژگی ها میتونین رنگ نوارها رو مشخص کنید. در این ابزار چهار رنگ رو میشه مشخص کرد.
  • fadeIn : مدت زمان ظاهر شدن بر حسب میلی ثانیه
  • fadeOut : مدت زمان مخفی شدن بر حسب میلی ثانیه

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram