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

nanobar.js : ابزاری برای ساخت نوار پیشرفت

0 1890 ۱۵ دی ۹۳

در این مطلب میخوام یک ابزار بنام nanobar رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این ابزار Javascript میتونین به راحتی هر چه تمامتر نوار پیشرفت ( Progress Bar ) برای هر عنصری از سایتتون قرار بدین. حتی میتونین کاری کنید که این نوار پیشرفت در بالای سایتتون و در زیر Browser باشه و متناسب با هدف شما زیاد بشه.

میبینید که در قسمت چسبیده به بالا ، یک نوار پیشرفت شروع به زیاد شدن میکنه و در آخر هم ناپدید میشه. زمانی که به 100 درصد رسید ، پنهان میشه.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به nanobar.min.js نیاز داریم. من این فایل رو در انتهای مطلب قرار دادم و میتونین از اون استفاده کنید. این رو هم بگم که حجم این ابزار بسیار کمه ، به jQuery هم نیاز نداره. این ابزار پشتیبانی خوبی هم از مرورگرها داره و در IE7 به بالا به خوبی کار میکنه.

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم. ما میتوانیم برای چند المنت هم بطور همزمان نوار پیشرفت قرار بدیم. در بالا یک div قرار دادیم و در ادامه میخوایم برای اون یک نوار پیشرفت قرار بدیم. این نوارها در بالای المنتها قرار میگیرن.

بعد از اینکه المنت مورد نظرتونو قرار دادین ، وقت استفاده از کدهای Javascipt فرا میرسه. برای اینکار باید از کد زیر در تگ script نهایی استفاده کنید :

در ابتدا باید یک متغیر بنام options بسازین و خصوصیتهای مورد نظر نوار پیشرفت رو به اون نسبت بدین :

  • bg : رنگ نوار پیشرفت رو مشخص میکنه
  • target : آی دی عنصری که میخواین برای اون نوار پیشرفت قرار بدین. اگر این ویژگی رو قرار ندین ، بطور پیشفرض نوار برای کل صفحه قرار میگیره.
  • id : میتونین در این قسمت برای نوارتون یک id مشخص قرار بدین که بتونین به اون دسترسی داشته باشین. بعضی جاها میتونه کاربرد داشته باشه.

بعد از اینکه این متغیر رو ساختین باید اون رو به شئ Nanobar پاس بدین. در ابتدا باید با استفاده از عملگر new یک شی از نوع Nanobar بسازین و اون رو در یک متغیر قرار بدین. در بالا در متغیر nanobar قرار دادیم. با این کار ما به نوار ، با استفاده از همین نام دسترسی داریم و میتونیم مقدار اون رو مشخص کنیم.

اینو در همینجا بگم که ، برای ساختن چند نوار پیشرفت برای عناصر مختلف باید چند شئ جدید با نام های مختلف بسازین و اونارو به عناصر مورد نظرتون نسبت بدین.

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

باید نام شئ مورد نظر رو که در بالا ساختیم بزاریم و با استفاده از متد go ، مقدار اون رو مشخص کنیم. عددی که درون پرانتز قرار میگیره ، میتونه از 0 تا 100 باشه. اگر 100 بشه ، نوار پنهان میشه. همچنین میتونین برای متحرک کردن این نوار از حلقه for و توابعی مانند setTimeout استفاده کنید.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram