jquery进度条实现 jquery-ul
进度条，其实在很多场景被使用，被要求实现，诸如：翻页，数据下拉时显示部分与未显示部分的百分比等，而我第一次使用它的场合是在，一个图片翻页时。
第一反应找寻jquery相关，而尽量避免找寻一些额外的插件实现，随之找到了jquery-ui这个基于jquery插件库。
jquery-ui与jquery关系：
- (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
- (2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
- (3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。
本来想自己弄一遍弄一个dome，不知为何每次都是js错误，先用别人的顶上吧..... 哎
一、 前言
进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。
二、 最简单的例子
首先引入样式和js库：
<link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js">script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">script>
可以使用div来作为显示进度条的载体：
<div id="divProgressbar">div>
将上面的div变成进度条：
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 30}); //初始话进度条并设置初始值为30
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value")); //读取进度条的当前值
});
script>
一运行例子就明白
三、 要进度条动起来怎么办？
做个小实验，修改jquery代码如下：
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 30});
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
$("#divProgressbar").progressbar({value: 60});
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
$("#divProgressbar").progressbar({value: 90});
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
});
script>
运行，看是什么结果，进度条没变化，每次弹出框的值都是30吧！为什么捏？因为.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到，在dialog那篇里也说到同一个控件是不允许被多次初始化的，所以我们必须用其它的方法来修改进度条的当前值，jQuery提供了.progressbar("option", "value", 60)方法来设置当前值，这里还可以发现，不在后面加数值参数的话就是读取当前值。
再修改代码如下：
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 30});
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
$("#divProgressbar").progressbar("option", "value", 60);
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
$("#divProgressbar").progressbar("option", "value", 90);
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
});
script>
嘿嘿——进度条动起来了，而且弹出框的值也变化了。
四、 可以实用的进度条
修改代码如下：
<script type="text/javascript">
$(function(){
updateProgressbarValue(); //调用函数
function updateProgressbarValue(){
$("#divProgressbar").progressbar({value: 0}); //初始化进度条，如果已经初始化则会跳过
var newValue = $("#divProgressbar").progressbar("option", "value") + 3; //读取进度条现有值并计算出新值
$("#divProgressbar").progressbar("option", "value", newValue); //设置进度条新值
setTimeout(updateProgressbarValue, 500); //使用setTimeout函数延迟调用updateProgressbarValue函数，延迟时间为500毫秒
}
});
script>
这里最重要的是使用了setTimeout来延迟调用函数，并且这是一个自嵌套函数，如果没有终止它的话它将一直运行下去，这是不被允许的。
在setTimeout(updateProgressbarValue, 500);前加入下面的代码就知道了：
alert(newValue);
五、 在适当的地方终止这个傻头傻脑的程序
其实我们只需要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了：
if(newValue <= 100)setTimeout(updateProgressbarValue, 10);
这样我们就可以在进度条满了后终止这个傻瓜继续执行。
最终代码如下：
<script type="text/javascript">
$(function(){
updateProgressbarValue();
function updateProgressbarValue(){
$("#divProgressbar").progressbar({value: 0});
var newValue = $("#divProgressbar").progressbar("option", "value") + 10;
$("#divProgressbar").progressbar("option", "value", newValue);
alert(newValue);
if(newValue <= 100) setTimeout(updateProgressbarValue, 10);
}
});
script>
另外附上一个地址： jQuery UI 实例 - 进度条（Progressbar）
原文地址：http://blog.csdn.net/soldierluo/article/details/5019887