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

Jquery進(jìn)度條插件 Progress Bar小問題解決

 更新時(shí)間:2011年07月12日 23:23:27   作者:  
今天遇到一個(gè)進(jìn)度條的小問題,搞的我小糾結(jié)了一會(huì),最后感謝同事分享文章,得以結(jié)局,呵呵,小經(jīng)驗(yàn)還是要保存的
個(gè)人使用總結(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ā)的進(jìn)度條插件,秉承了JQuery的簡(jiǎn)約哲學(xué)。
不僅容易使用,而且可以輕松定制外觀。對(duì)于使用了JQuery框架的項(xiàng)目來說,
需要使用進(jìn)度條控件時(shí)這是一個(gè)不錯(cuò)的選擇。
JQuery Progress Bar與常規(guī)插件一樣,只要用選擇器選擇一個(gè)HTML元素后,
直接調(diào)用插件的公開方法即可。它提供的公開方法名稱為progressBar()。
那么,當(dāng)HTML頁面上有一個(gè)id為progress1的元素時(shí),可以這樣初始化該控件:
$("#progress1").progressBar();
它的構(gòu)造函數(shù)可以接收如下表所示的參數(shù)。

方法及參數(shù)

用途

progressBar()

按默認(rèn)設(shè)置初始化一個(gè)進(jìn)度條

progressBar(persent)

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

progressBar(config)

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

progressBar(persent,config)

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

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

屬性

用途

increment

設(shè)置進(jìn)度條每步的增長(zhǎng)度。默認(rèn)值為2。

speed

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

showText

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

boxImage

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

barImage

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

width

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

height

設(shè)置進(jìn)度條的高度,這個(gè)值必須與barImageboxImage所指向的圖片相適應(yīng)。默認(rèn)值為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年一份兼職的時(shí)候無聊加上去的,為jQuery添加觸摸事件的支持。因?yàn)樽龅糜悬c(diǎn)無聊,所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動(dòng)設(shè)備,主要是Webkit的移動(dòng)設(shè)備
    2014-02-02
  • 從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇

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

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

    jquery獲得keycode的示例代碼

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

    jquery滾動(dòng)特效集錦

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

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

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

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

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

    jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例

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

    jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框

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

    jquery中獲得元素尺寸和坐標(biāo)的方法整理

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

    使用jquery解析XML示例代碼

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

最新評(píng)論