进度条插件ProgressBar(如何调用jQuery插件学习第十天)

巫马修然
2023-12-01

       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是一个对象,它包含设置进度条的多项属性和事件,其属性和事件的详细功能如下表格:

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()方法时,不管该方法中有无参数,只能对一个元素使用一次,不能重复使用,否则,进度条的显示将会有异样。

 类似资料: