jQMeter.js —動態進度條外掛
阿新 • • 發佈：2019-02-02
簡介
是一款簡單實用的輕量級進度條jQuery外掛，外掛可以讓您輕鬆實現帶動畫效果的水平或垂直進度條，你只需傳引數或是配置下選項就可以完成你想要的進度條效果。
外掛使用了一個out-of-the-box的簡單設計，目的是為了方便您通過引數選項配置您想到的進度條效果，這些引數包括：寬度、高度、背景色、進度條顏色等等，通過這些引數你可以構造自己的進度條樣式。
使用方法
1、構建html
外掛的html非常簡單，只需一個帶ID或class的空DIV就可以了。
| 1 |
<div id="jqmeter-container"></div> |
2、引入檔案
| 1 2 |
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jqmeter.min.js"></script>
|
初始化外掛
| 1 2 3 |
$(document).ready(function(){
$('#jqmeter-container').jQMeter();
});
|
進度條外掛有兩個必填的引數：goal和raised。此外還有一些可用的引數，其中一些引數也可以使用css來實現，如顏色引數。
| 1 2 3 4 5 6 7 |
$('#jqmeter-container').jQMeter({
goal:'$1,000',
raised:'$200',
orientation:'vertical',
width:'50px',
height:'200px'
});
|
引數
| 引數 | 型別 | 預設值 | 描述 |
| goal | string | 無預設值，必填引數 | 進度條的總長度。可以設定為字串，如"$9000"，或整數，如:"9000" |
| raised | string | 無預設值，必填引數 | 進度條的當前進度。可以設定為字串，如"$5000"，或整數，如:"5000" |
| width | string | 100%-水平寬度。（在水平進度條中必須設定） | 設定進度條的水平寬度。可以設定為百分比或畫素值 |
| height | string | 50px。（在垂直進度條中必須設定） | 設定進度條的垂直高度。可以設定為百分比或畫素值 |
| bgColor | string | #444 | 進度條的背景顏色。支援hex、rgba和顏色關鍵字。 |
| barColor | string | #bfd255 | 進度條的顏色。支援hex、rgba和顏色關鍵字。 |
| orientation | string | horizontal | 進度條的方向，可設定為： 'horizontal' 或 'vertical'。如果設定為垂直進度條，該引數必須設定。 |
| displayTotal | boolean | true | 是否顯示進度條完成的百分比數。 |
| animationSpeed | integer | 2000 | 進度條動畫時間，單位毫秒 |
| counterSpeed | integer | 2000 | 進度條計數的時間，單位毫秒 |