一、 前言
进度条可以向用户显示程序当前完成的百分比,让用户知道程序的进度,提高了用户体验。
二、最简单的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo1</title>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
//初始话进度条并设置初始值为30
$("#divProgressbar").progressbar({value: 30});
//读取进度条的当前值
alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));
});
</script>
</head>
<body>
可以使用div来作为显示进度条的载体:
<div id="divProgressbar"></div>
</body>
</html>
效果如下图所示:
三、要进度条动起来怎么办?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo1</title>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<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>
</head>
<body>
可以使用div来作为显示进度条的载体:
<div id="divProgressbar"></div>
</body>
</html>
运行,看是什么结果,进度条没变化,每次弹出框的值都是30吧!为什么捏?因为.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到,在dialog那篇里也说到同一个控件是不允许被多次初始化的,所以我们必须用其它的方法来修改进度条的当前值,jQuery提供了.progressbar("option","value", 60)方法来设置当前值,这里还可以发现,不在后面加数值参数的话就是读取当前值。
上一句话不知原作者是怎么测试的,滚动条是可以动的,经过测试时可以重新赋值的,与下面的例子效果没有什么不同
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo1</title>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<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>
</head>
<body>
可以使用div来作为显示进度条的载体:
<div id="divProgressbar"></div>
</body>
</html>
经测试,两种方式效果一样。这个就不贴图了,自己试一下,我使用的是网络资源,不用自己准备jquery,拷贝下来就可以测试
四、可以实用的进度条
修改代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo1</title>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
//初始化进度条,如果已经初始化则会跳过
$("#divProgressbar").progressbar({value: 0});
//调用函数
updateProgressbarValue();
function updateProgressbarValue(){
//读取进度条现有值并计算出新值
var newValue = $("#divProgressbar").progressbar("option","value") + 3;
//设置进度条新值
$("#divProgressbar").progressbar("option","value", newValue);
//使用setTimeout函数延迟调用updateProgressbarValue函数,延迟时间为500毫秒
setTimeout(updateProgressbarValue, 500);
}
});
</script>
</head>
<body>
可以使用div来作为显示进度条的载体:
<div id="divProgressbar"></div>
</body>
</html>
这里最重要的是使用了setTimeout来延迟调用函数,并且这是一个自嵌套函数,如果没有终止它的话它将一直运行下去,这是不被允许的。
在
setTimeout(updateProgressbarValue, 500);
前加入下面的代码就知道了:
alert(newValue);
五、 在适当的地方终止这个傻头傻脑的程序
其实我们只需要在
setTimeout(updateProgressbarValue, 500);
前加一个判断就ok了:
if(newValue <= 100){
setTimeout(updateProgressbarValue, 10);
}
这样我们就可以在进度条满了后终止这个傻瓜继续执行。
最终代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo1</title>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 0});
updateProgressbarValue();
function updateProgressbarValue(){
var newValue = $("#divProgressbar").progressbar("option","value") + 10;
$("#divProgressbar").progressbar("option","value", newValue);
alert(newValue);
if(newValue <= 100) setTimeout(updateProgressbarValue, 10);
}
});
</script>
</head>
<body>
可以使用div来作为显示进度条的载体:
<div id="divProgressbar"></div>
</body>
</html>