1.样式
进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条,让用户知道当前正在执行操作。
2.练习:动态加载进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>progressBar</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body style="margin:100px;">
<div id="progressBarID" style="width:400px;"></div>
<a id="btnID"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-ok'">开始</a>
</body>
<script type="text/javascript">
var timeID=null;
$("#progressBarID").progressbar({
width:1000,
height:50
});
function getRandomNum(){
return Math.floor(Math.random()*9)+1;
}
function update(){
var num =getRandomNum();
var nowValue =$("#progressBarID").progressbar("getValue");
if(num+nowValue >100){
$("#progressBarID").progressbar("setValue",100);
window.clearInterval(timeID);
$("#btnID").linkbutton({
disabled:false
});
}else{
$("#progressBarID").progressbar("setValue",nowValue+num);
}
}
$("#btnID").bind('click',function(){
timeID=window.setInterval("update()", 300);
$("#btnID").linkbutton({
disabled:true
});
});
</script>
</html>
结果:
3.文档