欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery進度條插件 Progress Bar小問題解決

 更新時間:2011年07月12日 23:23:27   作者:  
今天遇到一個進度條的小問題,搞的我小糾結(jié)了一會,最后感謝同事分享文章,得以結(jié)局,呵呵,小經(jīng)驗還是要保存的
個人使用總結(jié):
復(fù)制代碼 代碼如下:

<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開發(fā)的進度條插件,秉承了JQuery的簡約哲學(xué)。
不僅容易使用,而且可以輕松定制外觀。對于使用了JQuery框架的項目來說,
需要使用進度條控件時這是一個不錯的選擇。
JQuery Progress Bar與常規(guī)插件一樣,只要用選擇器選擇一個HTML元素后,
直接調(diào)用插件的公開方法即可。它提供的公開方法名稱為progressBar()。
那么,當HTML頁面上有一個id為progress1的元素時,可以這樣初始化該控件:
$("#progress1").progressBar();
它的構(gòu)造函數(shù)可以接收如下表所示的參數(shù)。

方法及參數(shù)

用途

progressBar()

按默認設(shè)置初始化一個進度條

progressBar(persent)

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

progressBar(config)

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

progressBar(persent,config)

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

其中,config參數(shù)是一個哈希結(jié)構(gòu)對象,它包含了如下屬性用于設(shè)置進度條的外觀特性

屬性

用途

increment

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

speed

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

showText

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

boxImage

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

barImage

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

width

設(shè)置進度條的寬度,這個值必須與barImageboxImage所指向的圖片相適應(yīng)。默認值為120

height

設(shè)置進度條的高度,這個值必須與barImageboxImage所指向的圖片相適應(yīng)。默認值為12。

復(fù)制代碼 代碼如下:

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

相關(guān)文章

  • 為jQuery添加Webkit的觸摸的方法分享

    為jQuery添加Webkit的觸摸的方法分享

    這段代碼是我在做13年一份兼職的時候無聊加上去的,為jQuery添加觸摸事件的支持。因為做得有點無聊,所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動設(shè)備,主要是Webkit的移動設(shè)備
    2014-02-02
  • 從零開始學(xué)習jQuery (一) 開天辟地入門篇

    從零開始學(xué)習jQuery (一) 開天辟地入門篇

    本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導(dǎo)大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境. 詳細講解了如何在Visual Studio中配合使用jQuery.
    2010-10-10
  • jquery獲得keycode的示例代碼

    jquery獲得keycode的示例代碼

    本篇文章主要是對jquery獲得keycode的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • jquery滾動特效集錦

    jquery滾動特效集錦

    本文給大家匯總介紹的是jquery單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼,都是分廠常用的一些文字以及圖文的無縫滾動特效,希望能夠?qū)Υ蠹沂煜Query有所幫助。
    2015-06-06
  • jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法

    jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法

    這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實例形式總結(jié)分析了jQuery針對存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下
    2018-07-07
  • jQuery使用addClass()方法給元素添加多個class樣式

    jQuery使用addClass()方法給元素添加多個class樣式

    這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個class樣式的方法,實例分析了addClass方法的使用技巧及添加多個樣式的實現(xiàn)方法,需要的朋友可以參考下
    2015-03-03
  • jquery 動態(tài)遍歷select 賦值的實例

    jquery 動態(tài)遍歷select 賦值的實例

    今天小編就為大家分享一篇jquery 動態(tài)遍歷select 賦值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • jquery實現(xiàn)點擊彈出對話框

    jquery實現(xiàn)點擊彈出對話框

    這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊彈出對話框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • jquery中獲得元素尺寸和坐標的方法整理

    jquery中獲得元素尺寸和坐標的方法整理

    這篇文章主要介紹了jquery中獲得元素尺寸和坐標的方法,需要的朋友可以參考下
    2014-05-05
  • 使用jquery解析XML示例代碼

    使用jquery解析XML示例代碼

    這篇文章通過示例為大家介紹了使用jquery解析XML的方法,經(jīng)測試比較實用,需要的朋友可以參考下
    2014-09-09

最新評論