回到目录
Tue, 04/17/2007 - 23:56 — criecke
![ProgressBar.png ProgressBar.png](http://dojotoolkit.org/files/ProgressBar_0.png)
进度条对长时间运行的过程提供了动态的反馈。进度可以由javascript函数来更新。这个方法最适合用于长时间的javascript操作或者是一系列的Javascript XHR server调用.
例子
进度条通过javascript来更新
![]()
< script > ...
dojo.require("dijit.ProgressBar");
dojo.require("dijit.util.parser");
function doSomeLongOperation() ...{
for (i=0; i< 200; i++) ...{
// Do some lengthy operation
dijit.byId("jsProgress").update(...{progress: i});
}
}
</ script >
...
< div dijitType ="dijit.ProgressBar"
id ="jsProgress"
progress ="0%" maximum ="200"
annotate ="true" ></ div >
< input type ="button" value ="Go!" onclick ="doSomeLongOperation();" />
...
![]()
参见 API docs 了解更多的关于update()的信息.
如果你不能预先知道运行的最大值,进度表(ProgressMeter)提供了模糊版本(indeterminate version),这个版本不显示百分比的进度条,而是一个来回回弹的小方块-表示有东西在运行。
这个例子演示了执行XHR调用的模糊进度条。调用的时间用于估计10个请求的长度,这个长度被作为最大值来使用。
![]()
< script type ="text/javascript" > ...
dojo.require("dijit.ProgressBar");
dojo.require("dijit.util.parser");
![]()
dojo.addOnLoad(function() ...{
// This starts the indeterminate bar
dijit.byId("setTestBar").startAnimation();
// Do a call to see what the average response time is
timeStart = new Date();
var d = dojo.xhrGet(...{
url: "../services/waste_time.jsp",
handleAs: "text"
});
d.addCallback(function() ...{
// Stop the indeterminate bar
dijit.byId("setTestBar").stopAnimation();
avgTime = new Date() - timeStart;
//Now you can estimate the time for 10 calls
avgTime10 = avgTime * 10;
dijit.byId("setTestBar").maximum = avgTime10;
});
});
</ script >
![]()
Dijit 类型,属性和事件
dijit.ProgressBar
带有计算能力的进度部件
| |||
属性
| |||
annotate | boolean | true | 当为 true时,百分比标签显示出来 |
duration | integer | ??? | 以毫秒显示的时间,只和startAnimation , stopAnimation.一起使用 |
maximum | float | N/A | 最大样本数据 |
orientation | default, vertical | default | 进度条沿着x轴增长 ("default")或y轴增长 ("vertical") |
places | integer | 0 | number of decimal places to show in values |
progress | integer or n% | 0% | 进度条的初始值。带有%的百分值,0% <= progress <= 100%, 或者没有 "%": 绝对值, 0 <= progress <= 最大值 |
事件
| |||
onchange | 当进度条值变化时调用 | ||
方法
| |||
startAnimation | 显示模糊进度条 | ||
stopAnimation | 停止由startAnimation()方法开始的模糊进度条,并显示固定的进度条。 | ||
update | 更新进度条的百分比。通常给field传入javascript记录(Most often passed a Javascript record with field progress),也可以传入一个新的最大值。 | ||
CSS Classes
I'm not quite sure how to represent these yet. In this case, you set styles on dojoProgressBarColorLayer and set the class of the outer div to dojoProgressBarColor.
| |||
dojoProgressBarColorLayer | 如果你需要一个固定的彩色进度条,就设置这个值。这是用来显示关闭图片时的效果。 | ||
dojoProgressBarTileLayer | 如果你需要一个平铺图片的进度条,就设置这个值。 |
可访问性
The progress bar is made accessible by providing a solid border around the visual progress indicator. This border is implemented in an additional z-indexed layer so it does not change the visual characteristics of the bar when not in high contrast mode.. The layer with the border will be visible in high contrast mode as well as when images are turned off.
The internalProgress div is assigned the ARIA role of progressbar The valuenow attribute is updated as the progress is updated. No valuemin and valuemax values are provided since the valuenow attribute may be a string provided by the Web developer.
Note: The hot key for the Window-Eyes screen reader to speak progress bar information is ctrl-ins-b. JAWS provides the hot key ins-tab for announcing progress bar name and status.JAWS also has a setting to select the frequency of progress bar announcements. Go to the Configuration Manager, Select Set Options, then User Options and select the desired announcement frequency.
Tech Ed: Adam Peller, Simon Bates, Writer: Craig Riecke
回到目录