第二部分： Dijit 5.1 进度条。。。

回到目录

 Tue, 04/17/2007 - 23:56 — criecke

进度条对长时间运行的过程提供了动态的反馈。进度可以由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

 

回到目录