jQMeter是一款簡單實用的輕量級進度條jQuery插件，它可以顯示為水平或垂直進度條，進度條加載時帶有動畫特效，你只需要簡單的傳入一些參數到jQMeter對象的構造函數中就可以完成你想要的進度條效果。

該進度條插件的構造函數中允許你定義進度條的寬度、高度、背景色、進度條顏色等等參數，通過這些參數你可以構造自己的進度條樣式。

使用方法

使用這個進度條插件必須先引入jQuery和jqmeter.min.js文件。

HTML結構

該進度條插件的HTML結構使用一個空的

即可。

初始化插件

在頁面加載完畢之后，可以通過下面的方法來調用該進度條插件。

$(document).ready(function(){

$('#jqmeter-container').jQMeter();

});

注意：該進度條插件有兩個必填的參數：goal和raised。此外還有一些可用的參數，其中一些參數也可以使用css來實現，如顏色參數。

$('#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

進度條計數的時間，單位毫秒

總結

以上是生活随笔為你收集整理的html 可调节进度条控件,jQuery简单实用的轻量级进度条插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。