DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery進度條插件 Progress Bar小問題解決
Jquery進度條插件 Progress Bar小問題解決
編輯:JQuery特效代碼     
個人使用總結:
代碼如下:
<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>【Progresbar插件很重要】
<script type="text/javascript">
$(document).ready(function () {
    $("#progress1").progressBar(68, { barImage: '/content/images/progressbg_red.gif' });
  });
</script>
<div id="progress1"> </div>

JQuery Progress Bar是基於JQuery開發的進度條插件,秉承了JQuery的簡約哲學。
不僅容易使用,而且可以輕松定制外觀。對於使用了JQuery框架的項目來說,
需要使用進度條控件時這是一個不錯的選擇。
JQuery Progress Bar與常規插件一樣,只要用選擇器選擇一個HTML元素後,
直接調用插件的公開方法即可。它提供的公開方法名稱為progressBar()。
那麼,當HTML頁面上有一個id為progress1的元素時,可以這樣初始化該控件:
$("#progress1").progressBar();
它的構造函數可以接收如下表所示的參數。

方法及參數

用途

progressBar()

按默認設置初始化一個進度條

progressBar(persent)

按默認設置初始化或更新一個進度條,設置進度條的百分比至persent%.

progressBar(config)

按config中指定的設置初始化一個進度條,百分比為0%。注意不要在初始化之後使用該方法來更改進度條的設置,否則可能引起顯示不正常。

progressBar(persent,config)

按config中指定的設置初始化一個進度條,百分比為persent%。注意不要在初始化之後使用該方法來更改進度條的設置,否則可能引起顯示不正常。

其中,config參數是一個哈希結構對象,它包含了如下屬性用於設置進度條的外觀特性

屬性

用途

increment

設置進度條每步的增長度。默認值為2。

speed

設置進度條初始化時動態滑動效果的速度。默認值為15。這個值越大,則滑動速度越慢。

showText

設置是否顯示百分比標識文字。默認值為ture,即顯示百分比文字標識。

boxImage

設置邊框圖片。默認值為images/progressbar.gif。如需定制邊框,則修改該屬性,指向要使用的圖片即可。

barImage

設置進度標識圖片。默認值為images/progressbg_green.gif。如需定制,則修改該屬性,指向要使用的圖片即可。這個圖片分類兩節,前半節用於標識完成進度,後半截用於標識剩余未完成進度。兩節長度相等,且等於進度條的寬度。

width

設置進度條的寬度,這個值必須與barImage和boxImage所指向的圖片相適應。默認值為120。

height

設置進度條的高度,這個值必須與barImage和boxImage所指向的圖片相適應。默認值為12。

代碼如下:
$(document).ready(function() {
$("#spaceused1").progressBar();
$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
$("#uploadprogressbar").progressBar();
});

http://t.wits.sg/misc/jQueryProgressBar/demo.php#

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#download

<script type="text/javascript"> $("#loading").fadeOut() </script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved