前端開發(fā)中常常需要用到進(jìn)度條，而 jQuery 進(jìn)度條封裝可幫助我們在代碼編寫中更方便、快速地創(chuàng)建進(jìn)度條效果。下面介紹一下如何進(jìn)行 jQuery 進(jìn)度條封裝。

// 創(chuàng)建封裝函數(shù)
$.fn.progressBar = function (options) {
// 默認(rèn)設(shè)置
var settings = $.extend({
// 進(jìn)度條寬度
width: '100%',
// 進(jìn)度條高度
height: '20px',
// 進(jìn)度條顏色
color: '#0EA5E9',
// 進(jìn)度條背景顏色
backgroundColor: '#E4E4E4',
// 進(jìn)度條起始值
startValue: 0,
// 進(jìn)度條最大值
endValue: 100,
// 動畫時間
duration: 2000,
// 是否顯示進(jìn)度條值
showValue: true
}, options);
// 遍歷匹配元素
return this.each(function () {
// 創(chuàng)建 HTML 結(jié)構(gòu)
var progressBar = $(this),
progressTrack = $('<div/>').addClass('progress-track').appendTo(progressBar),
progressFill = $('<div/>').addClass('progress-fill').appendTo(progressTrack).css({ 'background-color': settings.color }),
progressValue = $('<div/>').addClass('progress-value').appendTo(progressBar);
// 樣式設(shè)置
progressBar.css({ 'width': settings.width, 'height': settings.height, 'background-color': settings.backgroundColor });
progressTrack.css({ 'height': settings.height });
progressFill.css({ 'height': settings.height, 'width': settings.startValue + '%'});
// 動畫設(shè)置
progressFill.animate({ width: settings.endValue + '%' }, {
duration: settings.duration,
step: function (now) {
// 是否顯示進(jìn)度條數(shù)值
if (settings.showValue) {
var progressPercent = parseInt((now / settings.endValue) * 100);
progressValue.text(progressPercent + '%');
}
}
});
});
};

上面的代碼中，我們首先定義了一個名為 “progressBar” 的函數(shù)，函數(shù)接受一個選項對象參數(shù)，選項對象中定義了進(jìn)度條寬度、高度、顏色、背景顏色、起始值、最大值、動畫時間和是否顯示進(jìn)度條百分比值等選項。

接下來，我們遍歷每個匹配的元素，創(chuàng)建進(jìn)度條的 HTML 結(jié)構(gòu)，并設(shè)置樣式及動畫。其中，動畫設(shè)置使用 animate() 方法實現(xiàn)，每處理一次動畫步驟，就根據(jù)當(dāng)前填充長度動態(tài)計算進(jìn)度條的數(shù)值，并將結(jié)果顯示在進(jìn)度條上（如果設(shè)置了顯示進(jìn)度條數(shù)值就顯示，否則不管）。

最后，我們通過使用 $.fn.extend() 方法將 progressBar 函數(shù)擴(kuò)展為 jQuery 的實例方法，以便在任意 jQuery 對象中使用這個擴(kuò)展方法。