progressbar进度条组件

时间:2021-08-30 14:50:38

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="width:400px;" ></div>
2)使用javascript创建progressbar
<div id="p" style="width: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="width:400px;height:400px; margin-left:400px; margin-top:100px;">
<!--
<div class="easyui-progressbar" data-options="value:30" style="width: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'); //这个没看出什么效果 });