JQuery UI之(六)进度条——Progressbar

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

二、最简单的例子
首先引入样式和js库:



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


将上面的div变成进度条:

一运行例子就明白

三、要进度条动起来怎么办?
做个小实验,修改jquery代码如下:

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

嘿嘿——进度条动起来了,而且弹出框的值也变化了。

四、可以实用的进度条
修改代码如下:

这里最重要的是使用了setTimeout来延迟调用函数,并且这是一个自嵌套函数,如果没有终止它的话它将一直运行下去,这是不被允许的。
在setTimeout(updateProgressbarValue, 500); 前加入下面的代码就知道了:
alert(newValue);

五、在适当的地方终止这个傻头傻脑的程序
其实我们只需要在setTimeout(updateProgressbarValue, 500); 前加一个判断就ok了:
if(newValue <= 100)setTimeout(updateProgressbarValue, 10);
这样我们就可以在进度条满了后终止这个傻瓜继续执行。
最终代码如下:


更多详细信息查看:http://docs.jquery.com/UI/Progressbar
【JQuery UI之(六)进度条——Progressbar】

    推荐阅读