基于jQuery的進度條展示效果

jopen 9年前發布 | 11K 次閱讀 jQuery 其他jQuery插件 jQuery插件

Bar Indicator是一款基于jQuery的進度條數據展示插件，它可應用于數據統計展示、投票統計以及任務進度等諸多場景中。它使用簡單、選項豐富，幾乎可以滿足用戶所有基于進度條的WEB設計需求，本文將結合實例給大家講解Bar Indicator的使用。

 HTML

首先加載jQuery和Bar Indicator相關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>

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

<span id="bar">55lt;/span>

看到了吧，代碼中數字55表示的就是這個進度條要展示的進度，默認是100，當然這個數字也可以在插件調用時定義好。

jQuery

準備好html后，然后開始調用Bar Indicator，只要一句代碼： 

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

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

選項與方法

參數 描述 默認值
data 如果是false，則會讀取html中目標元素中的值，否則將使用data定義的數值。 false
style 設置進度條樣式，有水平（horizontal）和垂直（vertical）兩種。 horizontal
animation 是否啟用進度條加載動畫，true/false true
foreColor 設置已完成的進度的顏色，默認false則讀取的是css中的設置。 false
backColor 設置整個進度條的背景色，默認false則讀取的是css中的設置。 false
horTitle 設置進度標題，如“已完成”。 false
numType 設置數值展示樣式，默認percent即百分數，也可以將數值設置為absolute，則不帶‘%’ percent
numMin 進度最小值。 0
numMax 進度最大值。 100
vertBarWidth 垂直進度條的寬度。 10
horBarHeight 水平進度條的高度。 10
vertBarHeight 設置垂直進度條的高度。可以設置為如：'line','18px','150%' line
milestones 是否顯示進度條上的刻度，默認在進度條上50%的位置會有一條線隔開。 true
方法
loadNewData 加載新數據。比如用戶重新輸入數據后，調用此方法進度條會發生變化。
var data = 85; //Any number
$('.myElement').barIndicator('loadNewData', [data]);
getPluginData 獲取進度數據。
$('.myElement').barIndicator();
//Call the getter and store it's value to a variable var storedData = $('.myElement').barIndicator('getPluginData');
console.log(storedData.barLength);

Bar Indicator非常強大，還有很多選項不本文就不一一列出，詳情可以關注Bar Indicator項目官網： https://github.com/kapantzak/barIndicator 。

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！