JQuery UI 之进度条——Progressbar

一、 前言

进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。

二、最简单的例子

可以使用div来作为显示进度条的载体：


 

效果如下图所示：

三、要进度条动起来怎么办？

可以使用div来作为显示进度条的载体：


 

运行，看是什么结果，进度条没变化，每次弹出框的值都是30吧！为什么捏？因为.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到，在dialog那篇里也说到同一个控件是不允许被多次初始化的，所以我们必须用其它的方法来修改进度条的当前值，jQuery提供了.progressbar("option","value", 60)方法来设置当前值，这里还可以发现，不在后面加数值参数的话就是读取当前值。

上一句话不知原作者是怎么测试的，滚动条是可以动的，经过测试时可以重新赋值的，与下面的例子效果没有什么不同

可以使用div来作为显示进度条的载体：


 

经测试，两种方式效果一样。这个就不贴图了，自己试一下，我使用的是网络资源，不用自己准备jquery，拷贝下来就可以测试

四、可以实用的进度条

修改代码如下：

可以使用div来作为显示进度条的载体：


 

这里最重要的是使用了setTimeout来延迟调用函数，并且这是一个自嵌套函数，如果没有终止它的话它将一直运行下去，这是不被允许的。

在

setTimeout(updateProgressbarValue, 500);

前加入下面的代码就知道了：

alert(newValue);

五、 在适当的地方终止这个傻头傻脑的程序

其实我们只需要在

setTimeout(updateProgressbarValue, 500);

前加一个判断就ok了：

if(newValue <= 100){
    setTimeout(updateProgressbarValue, 10);
}

这样我们就可以在进度条满了后终止这个傻瓜继续执行。

最终代码如下：

可以使用div来作为显示进度条的载体：