سبد (0)

آموزش ساخت نوار پیشرفت دایره ای

ایجاد نوار پیشرفت دایره ای با استفاده از پلاگین CircularLoader.Js

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

ویژگی های پلاگین

  • سازگاری با تمامی مرورگرهایی که HTML5 را پشتیبانی می کنند.
  • امکان ایجاد نوارهای پیشرفت به صورت سفارشی .
  • راحتی استفاده از پلاگین.

نحوه استفاده از پلاگین

ابتدا یک سند HTML ایجاد کنید و دو فایل "jquery-1.7.1.js" و "CircularLoader.js" را به سند متصل کنید.

بارگذاری کتابخانه و پلاگین

<script src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="/CircularLoader.js"></script>

ایجاد نوار پیشرفت ساده

در گام بعد یک عنصر <div> با مقدار شناسه "divProgress" ایجاد کنید. سپس کد اسکریپ زیر را برای اعمال تغییرات بر روی این عنصر را به سند اضافه کنید.

مثال (آموزش ساخت نوار پیشرفت دایره ای)

<body>
<div id="divProgress"></div>
<script>
$("#divProgress").circularloader({
progressPercent: 5 
});

/*Once a cirular progress is generated you can call circular loader function again to increase the progress percentage*/ 
$("#divProgress").circularloader({
progressPercent: 35 
});
</script>
<body/>
خودتان امتحان کنید »
 

تنها پارامتر اجباری تابع  circularloader، پارامتر تعیین کننده درصد پیشرفت یا "progressPercent" است، سایر پارامترها، اختیاری است که در صورت سفارشی سازی می توان از آنها استفاده کرد. 

درصد پیشرفت، مقدار پیشرفتی است که از 100 محاسبه می شود.

ایجاد نوار پیشرفت سفارشی

مثال زیر یک نوار پیشرفت سفارشی ایجاد می کند. تمامیِ پارامترهای استفاده شده اختیاری است و شما می توانید بر اساس نیاز خود از آنها استفاده کنید.

مثال (آموزش ساخت نوار پیشرفت دایره ای)

<script src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="/~/Scripts/CircularLoader.js"></script>
<div id="divProgress"></div>
<script>
$("#divProgress").circularloader({
backgroundColor: "#ffffff",
fontColor: "#000000",
fontSize: "40px",
radius: 70,
progressBarBackground: "#cdcdcd",
progressBarColor: "#aaaaaa",
progressBarWidth: 25,
progressPercent: 0,
progressValue:0,
showText: true
</script>
خودتان امتحان کنید »
 

موارد قابل تنظیم

  • backgroundColor: رنگ پس زمینه (داخلی) نوار را مشخص می کند.
  • fontColor: رنگ فونت را مشخص می کند.
  • fontSize : اندازه فونت را مشخص می کند.
  • radius : میزان انحنای گوشه ها را مشخص می کند.
  • progressBarBackground :رنگ پس زمینه نوار پیشرفت را مشخص می کند.
  • progressBarColor : رنگ نوار پیشرفت را مشخص می کند.
  • progressPercent : در صد پیشرفت را مشخص می کند.
  • progressValue : در صورتی که بخواهیم به جای درصد پیشرفت مقدار پیشرفت را به وسیله یک عدد نمایش دهیم، عدد مورد نظر را برای این پارامتر تنظیم می کنیم.
  • showText : نمایش یا عدم نمایش نوار پیشرفت را مشخص می کند.

سازگاری با مرورگرها

سازگاری با تمام مرورگرهایی که HTML5 را پشتیبانی می کنند مثل:  Internet Explorer 9.0+, Google Chrome 4.0+, Mozilla Firefox 2.0+, Safari 3.1+

دانلود فایل های پلاگین CircularLoader.js

حجم: 1.16 کیلو بایت

نوشته شده توسط شهربانو دوستی
بازدید: 8809

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه