WidgetNas

میله پیشرفت Progress bar

در بسیاری از جاها نیاز است که درصد پیشرفت عملیاتی را مشخص کرد، برای مثال ارسال اطلاعات حجیم دارید، در حال محاسبه سمت سرور یا کلاینت است و یا حتی درصد پیشرفت پروژه کاری را میخواهید مشخص کنید.

پیشنهاد نمیشود از موضوع پیش فرض progress استفاده کنید، این موضوع بسیار محدود است.

برای نمایش انواع مختلف به مثالهای زیر توجه کنید.

مثال

نمایش شماره صفحه به صورت لینک و دکمه در زیر آورده شده است.

LTR

RTL

برچسب

LTR

25%

RTL

25%

ارتفاع

LTR

RTL

رنگ و شکل میله

LTR

50%
50%
50%
50%

RTL

50%
50%
50%
50%

چند میله ای

اگر میخواهید عدد درصد در وسط نوار قرار گیرد، مقدار را در کلاس progress-caption بنویسید.

LTR

60%

RTL

60%

راه راه

LTR

RTL

راه راه متحرک

LTR

RTL

جاوا اسکریپت

برای تنظیم و مقدار دهی توسط جاوا اسکریپت ابتدا باید wn-type="progress" را به div اصلی نسبت دهید. از این جا به بعد، سیستم میفهمند که شما میخواهید از توابع جاوا اسکریپت استفاده کنید.

خصوصیت min و max
اگر میخواهید، عددی که وارد میکنید به طور خودکار محاسبه شود، باید مقدار min و max را مقدار دهی کنید، مقدار پیش فرض 0 و 100 است. 


    <div
        id="progress1"
        class="progress"
        wn-type="progress"
        min="0"
        max="1000">
        ...
    </div>

    <script>
        WN('progress1').wn.min=0;
        WN('progress1').wn.max=1000;
    </script>

خصوصیت value
این مقدار فقط توسط جاوا اسکریپت مقدار دهی خواهد شد، مقداری که در بین min و max است. 


    <div
        id="progress1"
        class="progress"
        wn-type="progress"
        min="0"
        max="1000">
        ...
    </div>

    <script>
        WN('progress1').wn.value=500;
    </script>

چند میله ای
اگر میخواهید چند نوع خط پیشرفت داشته باشید، مثلا تا 30 درصد، رنگ قرمز، تا 70 درصد زرد و تا 100 درصد سبز باشد، باید طبق موارد گفته شده در بالا، چند میله داشته باشید، ولیکن برای مشخص نمودن مرز این اعداد از خصوصیت max = 'x' استفاده کنید.
توجه داشته باشید این اعداد باید به صورت درصد باشند یعنی بین 0 تا 100. 


    <div
        id="progress1"
        class="progress"
        wn-type="progress"
        min="0"
        max="1000">
        <div class="progress-bar danger-color" max="30"></div>
        <div class="progress-bar warning-color" max="70"></div>
        <div class="progress-bar success-color" max="100"></div>
        <div class="progress-caption"></div>
    </div>

    <script>
        WN('progress1').wn.value=500;
    </script>