進度條外掛ProgressBar(如何呼叫jQuery外掛學習第十天)
ProgressBar是一款基於jQuery開發進度條外掛,它的優點是:使用程式碼簡潔,可輕鬆定製它的外觀;當頁面請求耗時較長,需要使用者等待時使用,如檔案上傳和大圖片,多資料載入時,可新增外掛,以增加使用者的體驗。
ProgressBar外掛在Images資料夾中對應6張圖片,其中1張是背景色圖片,另外5張為自定義的5種進度顏色圖片。這5張圖片都由長度相等的兩個部分組成,前部分用於顯示所完成的進度值,後部分用於顯示餘下的進度值,後部分用於顯示餘下的進度值,通過不同的顏色進行區分。
進度條外掛ProgressBar的使用:
(1)外掛檔案:
Js-8-9/jquery.ProgressBar.js
(2)下載地址:
http://t.wits.sg/jquery-progress-bar/
(3)功能描述:
在頁面中增加一個ID號為"pb"的<p>元素,編寫Javascript程式碼將該元素與進度條件相繫結,分別顯示使用不同引數呼叫時的頁面效果。
(4)實現程式碼:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="Js-8-10/jquery.progressbar.js"></script> <style type="text/css"> body{font-size:13px} h3,p{padding:0px;margin:0px} </style> <script type="text/javascript"> $(function() { $("#pb").progressBar(); //繫結初始化 /*$("#pb").progressBar(68,{ barImage:'images/progressbg_orange.gif', showText:false });//改變進度條顯示的圖片顏色*/ /*$("#pb").progressBar(68,{ max:'100', textFormat:'fraction', callback:function(data) { if (data.running_value == data.value){ alert("上傳成功"); } } });//呼叫回撥函式*/ /*$("#pb").progressBar(68,{ barImage:'images/progressbg_yellow.gif', width:120, height:12 });//自定義進度條的寬與高*/ }) </script>
<div>
<h3>進度條:</h3>
<P id="pb">100</p>
</div>
(5)程式碼分析:
在本示例中,頁面中的元素與進度條外掛繫結的程式碼格式如下:
$(頁面元素).progressBar(persent,config)
其中,$(頁面元素)表示需要被繫結的頁面元素,progressBar()為進度條外掛初始化並繫結元素的方法,該方法中的引數present表示當前進度的百分比值,引數config是一個物件,通過該物件可以設定進度條外掛在初始化時的各項屬性值,如進度條的速度,背景色等。
頁面中的元素在呼叫progressBar()初始化進度條時,引數present,config都是可選項,程式碼如下:
$(頁面元素).progressBar()
上述程式碼僅是表示初始化一個進度表條頁面元素,並沒有指定該進度條的值,另外,進度條的當前值也可以從元素中獲取。
此外,也可以指定進度條的值,初始化頁面元素,程式碼如下:
$(頁面元素).progressBar(persent)
上述程式碼表示按指定的百分比值,初始化一個進度條頁面元素,present表示進度調外掛的當前百分比進度值。此外,也可以呼叫兩個引數初始化頁面進度條元素,程式碼如下:
$(頁面元素).progressBar(persent,config)
上述程式碼表示,按指定的present百分比值和config物件設定的屬性值,初始化一個進度條頁面元素。config是一個物件,它包含設定進度條的多項屬性和事件,其屬性和事件的詳細功能如下表格:
引數名稱 | 功能描述 |
steps | 進度條向前增進的步長,預設值為2畫素。 |
stepDuration | 進度條向前滑進時的速度,預設值為15,值越大,滑進的速度越慢。 |
showText | 是否顯示進度條右側的百分比文字,預設值為true,表示顯示。 |
boxImage | 設定滑動條框圖片背景URL,預設值為"images/progressbar.gif" |
barImage | 設定進度條主體圖片背景URL,外掛自帶5種主體圖片背景,預設值為"images/progressbg_green.gif",其餘4種URL地址分別為"images/progressbg_black.gif","images/progressbg_orange.gif","images/progressbg_red.gif","images/progressbg_yellow.gif"。 |
width | 設定進度條的寬度,該值必須與邊框和主體背景圖片相一致,預設值為120畫素。 |
height | 設定進度條的寬度,該值必須與邊框和主體背景圖片相一致,預設值為12畫素。 |
max | 設定進度條的最大值,即最大範圍,進度條的當前值必須小於或等於該值。 |
textFormat | 設定進度條右側百分比文字顯示的格式,該格式有兩種:一種是百分比,另外一種為分數形式,預設為百分比形式。 |
callback | 回撥函式,當進度條滑動的值等於設定的百分比值時觸發該函式,即當進度條滑動效果結束時,呼叫該函式。 |
說明:當使用頁面元素呼叫進度條的progressBar()方法時,不管該方法中有無引數,只能對一個元素使用一次,不能重複使用,否則,進度條的顯示將會有異樣。