[学习交流] 分享JQuery EasyUI的学习笔记-progressbar提示框组件

这个是昨天刚学的一块，还是热的。很多笔记记了之后由于种种原因就没有再看了，有时候当做手册翻一翻。这是我学习上的缺点，应该坚持定期的看自己的笔记。子曰：温故而知新。共勉！

属性
width 'auto'/string 设置进度条的宽度，默认为auto
height 22/number 设置进度条的高度，默认22
value  0/number    设置进度条的值，默认0
text '{value}%' 设置进度条的模板，默认'{value}%'

事件
onChange 参数：newVal oldVal  在值更改的时候触发

方法
options 参数：none  返回属性对象
resize 参数：width 组件大小
getValue 参数:none 返回当前进度值
setValue 参数：value 设置一个新的进度值

修改默认值：
$.fn.progressbar.defaults.value = 10;

示例代码：

<!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>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript">
$(function (){
$('.pro').progressbar({
width:200,
height:30,
value:40,
text:'百分之：{value}',
onChange:function (newVal, oldVal){
console.log('新值：'+newVal+"老值："+oldVal);
}
});
$('.pro').click(function (){
setInterval(function (){
$('.pro').progressbar('setValue', $('.pro').progressbar('getValue') + 5);
},2000);
});
$('.pro').dblclick(function (){
$('.pro').progressbar('resize',300);
});
});
</script>
</head>
<body>
<div class="pro">
</div>
</body>
</html>

复制代码

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 分享JQuery EasyUI的学习笔记-progressbar提示框组件

0 个回复