【EasyUI篇】ProgressBar进度条组件
程序员文章站
2022-03-05 22:11:37
...
微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
6.ProgressBar进度条组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ProgressBar</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ProgressBar.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body style="text-align: center; margin-top: 200px;">
<%--Class加载方式实现进度条--%>
<%--<div class="easyui-progressbar" style="width: 400px;" data-options="value:60,">
</div>--%>
<div id="box">
</div>
<button id="btn1">
改变进度条的值
</button>
<button id="btn2">
获得当前进度条的值
</button>
<button id="btn3">
重新设置进度条的长度
</button>
</body>
</html>
JS文件
$(function () {
//全局设置
$.fn.progressbar.defaults.value = 10;
$("#box").progressbar({
//设置进度条的长度,默认auto
width:400,
//设置进度条的高度，默认22
height:22,
//设置进度条的值，默认0
// value:60,
//设置进度条百分比模板
text:'{value}%',
//----------- 事件列表 -------------------
onChange:function (newValue,oldValue) {
console.log('newValue:'+newValue+", oldValue:"+oldValue);
}
});
//-------------- 方法列表 -----------------
//延时执行
/*setTimeout(function () {
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
},1000);
*/
//循环执行
setInterval(function () {
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+1);
},200);
// 返回属性对象
console.log($("#box").progressbar('options'));
//设置进度条的值
var j = 0;
$("#btn1").click(function () {
$("#box").progressbar('setValue',j++);
});
//获得当前进度条的值
$("#btn2").click(function () {
alert("当前值为："+$("#box").progressbar('getValue'));
});
//重新设置进度条的长度
$("#btn3").click(function () {
$("#box").progressbar('resize', 1000);
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源