jQuery輕量級進度條外掛程式jQMeter

2021-09-29 19:47:12 字數 1372 閱讀 6510

jqmeter是一款簡單實用的輕量級進度條

jquery外掛程式,外掛程式可以讓您輕鬆實現帶動畫效果的水平或垂直進度條,你只需傳引數或是配置下選項就可以完成你想要的進度條效果。

外掛程式使用了乙個out-of-the-box的簡單設計,目的是為了方便您通過引數選項配置您想到的進度條效果,這些引數包括:寬度、高度、背景色、進度條顏色等等,通過這些引數你可以構造自己的進度條樣式。

引入核心檔案

外掛程式的html非常簡單,只需乙個帶id或class的空div就可以了。

$(document).ready(function());
進度條外掛程式有兩個必填的引數:goal和raised。此外還有一些可用的引數,其中一些引數也可以使用css來實現,如顏色引數。

$('#jqmeter-container').jqmeter();
引數

型別預設值

描述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

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

輕量級jQuery網格外掛程式 ParamQuery

paramquery是一種輕量級的jquery網格外掛程式,基於用於使用者介面控制 具有一致api的優秀設計模式jqueryui widget factory建立,能夠在網頁上展示各種類似於excel和google spreadsheet效果的網格。使用paramquery,開發者可以輕鬆地實現以下...

簡約之美,JQuery之進度條外掛程式

jquery progress bar是基於jquery開發的進度條外掛程式,秉承了jquery的簡約哲學。不僅容易使用,而且可以輕鬆定製外觀。對於使用了jquery框架的專案來說,需要使用進度條控制項時這是乙個不錯的選擇。jquery progress bar與常規外掛程式一樣,只要用選擇器選擇乙...

Eclipse 外掛程式實現進度條

eclipse 外掛程式中,很多時候會遇到需要長時間執行的任務,這些任務需要放在後台執行緒裡執行,否則,就會使 eclipse 的 ui 僵住。這個時候,我們需要使用 eclipse 提供的 job 或者 progressmonitordialog 實現。1.使用 job job job new j...