ساخت نوار پیشرفت(Progress bar)

ساخت نوار پیشرفت(Progress bar)

در این آموزش ما به شما نحوه ایجاد یک نوار پیشرفت را می دهیم

برای مشاهده لینک وارد شود

نوار پیشرفت میتواند بین تگ <progress> قرار بگیرد  و دارای المان های  value,max,min میباشد.مثل زیر

<progress value="10" max="100"></progress>

استایل های نوار پیشرفت

ما میتوانیم داخل تگ progress برای آن استیل هایی نیز تعریف کنیم مثل زیر

progress {  
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;  
    border-radius: 9px;  
}

با این حال برای هر مرورگری این نوع تعریف متفاوت است

progress-styles

در فایرفاکس و سافاری المان های progress به صورت زیر ترجمه میشوند

<progress>  
    ┗ <div> ::-webkit-progress-bar  
         ┗ <div>::-webkit-progress-value

برای تغییر المان های progress در این مرورگر ها ما نیاز به اضافه کردن شبه کلاس هایی هستیم مثل زیر

progress::-webkit-progress-bar {  
    /* style rules */  
}  
progress::-webkit-progress-value {  
    /* style rules */  
}

و برای فایرفاکس مثل زیر عمل میکنیم

progress::-moz-progress-bar {  
    /* style rules */  
}

وبه طور کلی برای اضافه کردن  استایل های progress به صورت زیر عمل می کنیم

progress {  
    /* style rules */  
}  
progress::-webkit-progress-bar {  
    /* style rules */  
}  
progress::-webkit-progress-value {  
    /* style rules */  
}  
progress::-moz-progress-bar {  
    /* style rules */  
}

بعدا ما باید نحوه حرکت نوار پیشرفت را طراحی کنیم که به طور معمول از چپ به راست است.

HTML

<progress id="progressbar" value="0" max="100"></progress>

CSS

در این آموزش ما از jQuery برای نمایش حرکت نوار پیشرفت استفاده می کنیم بنابراین ما نباید وارد کردن کتابخانهjQuery را فراموش کنیم.

<script src="js/jquery.js" type="text/javascript"></script>

سپس ما از script برای گسترش کدمان استفاده میکنیم.در ابتدا ما باید المان های نوار پیشرفت را ذخیره کرده و سپس بر حسب فریم بر زمان تا مقدار ماکزیمم حرکت کنیم.

var progressbar = $('#progressbar'),  
    max = progressbar.attr('max'),  
    value = progressbar.val(),  
    time = (1000/max)*5;

سپس ما تابعی  برای نگه داشتن انیمیشن حرکت نوار پیشرفت استفاده می کنیم.

var loading = function() {  
}

در داخل تابع فوق ما مقدار را به اندازه۱ واحد در هر فریم بر زمان افزایش می دهیم.

value += 1;

و سپس مقدار به نوار پیشرفت اعمال می کنیم

addValue = progressbar.val(value);

همچنین ما نتیجه را در داخل نوار پیشرفت نمایش می دهیم.

$('.progress-value').html(value + '%');

سپس ما تابعی را برای اجرای انیمیشن ایجاد می کنیم.

setInterval(function() {  
    loading();  
}, time);

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

var animate = setInterval(function() {  
    loading();  
}, time);

در کنار متغییر loading ما عبارت شرطی زیر را اضافه می کنیم.

if (value == max) {  
    clearInterval(animate);  
}

در زیز تمام کد هایی که برای نمایش نوار پیشرفت مورد نیاز است نوشتیم

$(document).ready(function() {  
    var progressbar = $('#progressbar'),  
        max = progressbar.attr('max'),  
        time = (1000/max)*5,      
        value = progressbar.val();  

    var loading = function() {  
        value += 1;  
        addValue = progressbar.val(value);  

        $('.progress-value').html(value + '%');  

        if (value == max) {  
            clearInterval(animate);                      
        }  
    };  

    var animate = setInterval(function() {  
        loading();  
    }, time);  
};

 

+3
-2


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− 4 = چهار