jQuery輕量級進度條插件jQMeter
jQMeter是一款簡單實用的輕量級進度條jQuery插件，插件可以讓您輕松實現帶動畫效果的水平或垂直進度條，你只需傳參數或是配置下選項就可以完成你想要的進度條效果。
插件使用了一個out-of-the-box的簡單設計，目的是為了方便您通過參數選項配置您想到的進度條效果，這些參數包括：寬度、高度、背景色、進度條顏色等等，通過這些參數你可以構造自己的進度條樣式。
jquery實例教程：輕量級進度條插件jQMeter使用方法
引入核心文件
|
1
2
|
<
script
src
=
"js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/jqmeter.min.js"
></
script
>
|
構建html
插件的html非常簡單，只需一個帶ID或class的空DIV就可以了。
|
1
|
<
div
id
=
"jqmeter-container"
></
div
>
|
初始化插件
|
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 | 進度條計數的時間，單位毫秒 |
轉載請注明：jQ酷 » jQuery輕量級進度條插件jQMeter