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

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



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

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

0 1800 ۱۵ دی ۹۳

در این مطلب میخوام یک ابزار بنام 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