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

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"的元素，编写Javascript代码将该元素与进度条件相绑定，分别显示使用不同参数调用时的页面效果。
（4）实现代码：

body{font-size:13px} h3,p{padding:0px; margin:0px}

进度条： 100

（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	回调函数，当进度条滑动的值等于设置的百分比值时触发该函数，即当进度条滑动效果结束时，调用该函数。