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

- visibility ٠ mode_comment

در این مطلب میخوام یک پلاگین 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 از لغات فارسی استفاده کنید ، استایل خروجی به هم میریزه ، برای رفع این مشکل میتونین کد زیر رو قرار بدین :

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.