Progressbar 进度条组件
通过$.fn.progressbar.fn.defaults重写默认的defaults
进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。
不依赖其他组件
用法：
1、创建进度条Progressbar
1)进度条（Progressbar）组件可以从html标记创建或者编程创建。从标记创建更容易点，把‘easyui-progressbar’ class加到<div>标记
<div id = "p" class="easyui-progressbar" data-options="value:60" style="400px;" ></div>
2)使用javascript创建progressbar
<div id="p" style="400px;"></div>
$("#p").progressbar({
value : 60
});
获取或设置值
我们获取当前值并且给这个组件设置一个新值。
var value = $('#p').progressbar('getValue');
if(value < 100){
value += Math.floor(Math.random()*10);
$("#p").progressbar('setValue' , value);
}
2、属性
width string 设置进度条progressbar的宽度 auto
height number 组件的高度。该属性自版本1.3.2起可用 22
value number 百分比值 0
text string 显示在组件上的文本模板 {value}%
3、事件
onChange newValue，oldValue 当值改变时触发
4、方法
options none 返回选项（options）对象
resize width 调整组件尺寸
例子：
$("#p").progressbar('resize');//调整进度条为初始宽度
$("#p").progressbar('resize' , 350);//调整进度条为一个新的宽度
getValue none 返回当前的进度值
setValue value 设置一个新的进度值
<html> <title>index</title> <head> <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> <div style="400px;height:400px; margin-left:400px; margin-top:100px;"> <!-- <div class="easyui-progressbar" data-options="value:30" style="600px;"></div> --> <div id="box"></div> </div> </body> </html> $(function(){ $.fn.progressbar.defaults.value = 40; $("#box").progressbar({ width : 600, height : 30, //value : 20, text : '${value}%', // 默认是{value}% onChange : function(newValue , oldValue){ console.log("new:" + newValue + " , old:" + 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' , 800); //$("#box").progressbar('resize'); //这个没看出什么效果 });