基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果

2019-11-20 11:29:46

字體：大中小

供稿：網(wǎng)友

Bar Indicator是一款基于jQuery的進(jìn)度條數(shù)據(jù)展示插件，它可應(yīng)用于數(shù)據(jù)統(tǒng)計(jì)展示、投票統(tǒng)計(jì)以及任務(wù)進(jìn)度等諸多場(chǎng)景中。它使用簡(jiǎn)單、選項(xiàng)豐富，幾乎可以滿足用戶所有基于進(jìn)度條的WEB設(shè)計(jì)需求，本文將結(jié)合實(shí)例給大家講解Bar Indicator的使用。

查看演示下載源碼

HTML

首先加載jQuery和Bar Indicator相關(guān)js文件以及css文件。

<link href="bi-style.css" rel="stylesheet" /><script src="jquery.min.js"></script><script src="jquery-barIndicator.js"></script><script src="jquery.easing.1.3.js"></script>

由于使用了動(dòng)畫緩沖效果，記得把easing插件也加上，您可以下載源碼包，這些文件都打包好了。然后在<body>中加上HTML：

復(fù)制代碼代碼如下:

看到了吧，代碼中數(shù)字55表示的就是這個(gè)進(jìn)度條要展示的進(jìn)度，默認(rèn)是100，當(dāng)然這個(gè)數(shù)字也可以在插件調(diào)用時(shí)定義好。

jQuery

準(zhǔn)備好html后，然后開始調(diào)用Bar Indicator，只要一句代碼：

<script>$('#bar').barIndicator();</script>

是不是非常的簡(jiǎn)單，當(dāng)然要滿足您的項(xiàng)目需求的話，還需要進(jìn)行一些設(shè)置，而Bar Indicator為我們提供了豐富的選項(xiàng)設(shè)置和事件方法調(diào)用，諸如水平/垂直進(jìn)度條、進(jìn)度條顏色、數(shù)值展示、進(jìn)度數(shù)值獲取與重新設(shè)置等。

選項(xiàng)與方法