研究EasyUI系统—ProgressBar组件

2024-04-27 15:11:45

字体：大中小

来源：转载

供稿：网友

　　PRogressbar组件即极为常见的进度条，我们在安装程序以及其他比较耗时的场合能看见。　　首先看一下这个组件的效果，下面的代码实现了每隔1秒进度条就增加10%的功能。

<html> <head> <link rel="stylesheet" type="text/CSS" href="easyui/themes/default/easyui.css"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/Javascript" src="easyui/jquery.easyui.min.js"></script> <script> var t = 0, time_id = null; $("#progressbar").progressbar({ width:300, height:25, value:0, onChange:function(newValue, oldValue) { if (newValue == 100) { //如果进度到了100%，清除定时器，结束过程 window.clearInterval(time_id); time_id = null; } } }); function addProgressBar() { // 设置进度条显示的数值 t += 10; $("#progressbar").progressbar("setValue", t); } function startBar() { // 建立定时器，每隔1秒调用addProgressBar方法 time_id = window.setInterval(addProgressBar, 1000); } </script> </head> <body onload="startBar()"> <div id="container"> <div id="progressbar" class="easyui-progressbar"></div> </div> </body></html>

progressbar效果图　　实际页面中，进度条每隔一秒便会增加10%。　　上例代码中，我们先构造了id为progressbar的进度条，随后在“body”标签中添加onload事件，使页面加载完成时就执行startBar方法。startBar方法设置了一个定时器，每隔1秒就调用addProgressBar方法，而addProgressBar则将进度条的数值增加10。进度条的onChange事件在进度条数值改变时触发，作用是检测是否数值达到100，如已达到，则停止定时器。　　　　来看下progressbar的属性。

属性名称	属性值类型	默认值	描述
width	字符串或数值	“auto”	组件宽度。
height	数值	22	组件高度。

　　width和height表示组件高度和宽度，宽度既可以用“auto”，也可以设定具体的一个数值。height属性在只在1.3.2及以上版本才支持。　　value表示初始时一个显示进度的数值。　　text表示进度条中显示的文本，在图x-1中（使用了默认设置）中，显示的是“30%”。text中将进度值（即属性value）放在花括号“{}”中，并且可以在花括号的前后添加文字，例如“此时已完成{value}%的安装过程”，即显示“此时已完成30%的安装过程”字样。

　　progressbar方法。

方法名称	参数	描述
options	无	返回所有属性。
resize	width	重置或重新设置组件大小。
getValue	无	获取组件当前的进度值。
setValue	value	设置组件当前的进度值。