第八章：ProgressBar（进度条）组件
学习要点：
加载方式属性列表事件列表方法列表
一、加载方式：
1.class加载方式
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<div class="easyui-progressbar" style="width:400px" data-options="value"></div>
</body>
</html>
2.JS调用
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<!--
<div class="easyui-progressbar" style="width:400px" data-options="value"></div>
-->
<div id="box"></div>
</body>
</html>
$(function(){
$('#box').progressbar({
width:400,
});
});
二、属性列表：
ProgressBar属性
属性名值说明widthstring设置进度条宽度。默认为autoheightstring设置进度条高度。默认为22valuenumber设置进度条值。默认为0textstring设置进度条百分比模板：默认{value}%
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<div id="box"></div>
</body>
</html>
$(function(){
$('#box').progressbar({
width:400,
height:30,
value:.30,
text:'{value}%',
});
});
三、事件列表：
ProgressBar事件
事件名 传参说明onChange newValue,oldValue 在值更改的时候触发
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<div id="box"></div>
</body>
</html>
$(function(){
$('#box').progressbar({
width:400,
height:30,
value:.30,
text:'{value}%',
onChange:function(newValue,oldValue){
console.log('新：' + newValue + '，旧：' + oldValue);
},
});
/*
setTimeout(function(){
$('#box').progressbar('setValue',70);
},1000);
*/
setInterval(function(){
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
},200);
});
四、方法列表：
ProgressBar方法
方法名传参说明optionsnone返回属相对象resizewidth组件大小getValuenone返回当前进度值setValue value设置一个新的进度值
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<div id="box"></div>
</body>
</html>
$(function(){
//$.fn.progressbar.defaults.value = 30;
$('#box').progressbar({
width:400,
height:30,
value:.30,
text:'{value}%',
onChange:function(newValue,oldValue){
console.log('新：' + newValue + '，旧：' + oldValue);
},
});
/*
setTimeout(function(){
$('#box').progressbar('setValue',70);
},1000);
setInterval(function(){
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
},200);
*/
//console.log($('#box').progressbar('options'));
//$('#box').progressbar('resize',600);
});
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102840647
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载
