EasyUI之进度条progressBar

最新推荐文章于 2023-08-01 14:51:53 发布

sunpy 孙培煜

最新推荐文章于 2023-08-01 14:51:53 发布

阅读量9.1k

点赞数

分类专栏： __2.4 EasyUI 文章标签： easyui 进度条

本文链接：https://blog.csdn.net/ya_1249463314/article/details/70036825

版权

__2.4 EasyUI 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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.文档

sunpy 孙培煜

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
EasyUI之进度条progressBar

1.样式进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。2.练习：动态加载进度条progressBar <a id="btnID" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-
复制链接

扫一扫