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

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