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

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



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

readRemaining : پلاگین jQuery برای نمایش زمان تقریبی لازم برای خواندن مطلب

0 622 ۲۷ اردیبهشت ۹۴

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

readremaining

 

با استفاده از این پلاگین میتونین کاری کنید که بطور تقریب میزان زمانی که لازمه که کاربر به انتهای مطلب برسه رو نمایش بدین و با هر بار اسکرول کردن کاربر این عدد رفرش میشه.

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

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

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

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

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

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

استایلی رو برای اونا در نظر میگیرم :

از دو فایل css میتونین استفاده کنید. یا rr_light یا rr_dark. یکی روشنه و دیگری تیره.

حالا تنها کاری که لازمه بکنید اینه که در تگ اسکریپت نهایی کد زیر رو قرار بدین :

با اینکار تمام پیش فرضها اعمال میشه و کار به پایان میرسه. ولی تعدادی ویژگی داره که میتونین اونارو تغییر بدین :

  •  showGaugeOnStart : اگر مقدار این ویژگی رو برابر با true قرار بدین ، باکس مورد نظر در ابتدا نیز نمایش داده میشه
  • timeFormat : با استفاده از این ویژگی میتونین مشخص کنید که زمان مورد نظر در چه قالبی نمایش داده بشه. %m نشاندهنده دقیقه و %s نشاندهنده ثانیه باقی مانده هست.
  • showGaugeDelay : با هر بار اسکرول کردن ، باکس مخفی میشه و بار دیگه نمایش داده میشه و عدد جدید رو نشون میده. با استفاده از این ویژگی میتونین مشخص کنید که زودتر نمایش داده بشه. مثلا من در بالا مشخص کردم 100 میلی ثانیه بعد از انجام هر اسکرول نمایش داده بشه.

اگر در ویژگی timeFormat از لغات فارسی استفاده کنید ، استایل خروجی به هم میریزه ، برای رفع این مشکل میتونین کد زیر رو قرار بدین :

با اینکار استایل خروجی بهینه میشه.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram