Progress Bar examples - Events

This example shows how you can use the events that ProgressBar fires.

Control

Value

Range

The code to create the ProgressBar is:

var pb = new YAHOO.widget.ProgressBar({ value:127, maxValue:255, anim:true }).render('pbContainer'); var anim = pb.get('anim'); anim.duration = 3; anim.method = YAHOO.util.Easing.bounceBoth;

We are instantiating the ProgressBar and configuring it so that the initial value is 127 which is halfway to the maximum we set of 255, starting from the default minimum of 0. The range is set so that they translate directly into color values, which we then apply to the bar.The ProgressBar uses the Animation utility so to configure it we have to fetch the instance the ProgressBar uses and set its duration and easing method. We are using an animated ProgressBar with a long duration so we can see the events firing, otherwise it all happens too fast.

We are listening to the three events related to movement, the one that signals the start of the movement, progress that is fired several times while it is moving and the one that signals the completion of the movement. Without animation, the start, progress and complete events fire one after the other in close sequence.

pb.on('start',function (value) { Dom.get('status').innerHTML = 'Started'; window.setTimeout(function() { Dom.get('status').innerHTML = ''; },1000); }); pb.on('progress',function (value) { Dom.setStyle(this.get('barEl'),'backgroundColor','rgb(' + value + ',' + value + ',127)'); Dom.get('valueContainer').innerHTML = value; }); pb.on('complete',function (value) { Dom.get('status').innerHTML = 'Stopped'; window.setTimeout(function() { Dom.get('status').innerHTML = ''; },1000); });

We are doing simple actions with the events. We show a 'Started' sign for one second upon receiving the start event, we change the color of the bar itself according to the value received in progress and show that value right below the bar (all events provide the value) and finally, in the complete event we show a 'Stopped' sign. The value argument in all events provides the nominal value of the ProgresBar, not the size of the bar itself. A value of 50 will always be halfway in a range o 0 to 100, whether the ProgressBar is 100 or 500 pixels wide.

We have also provided a slider to change the end values for the bar so that we can show how to respond to those events and display their values, with the following code. The ProgressBar inherits the attribute change events from the Element utility. There are before and after change events for all configuration attributes.

pb.on('minValueChange',function(oArgs) { Dom.get('minValueContainer').innerHTML = oArgs.newValue; }); pb.on('maxValueChange',function(oArgs) { Dom.get('maxValueContainer').innerHTML = oArgs.newValue; });

The containers for the values and status texts are declared as shown below. Notice the yui-pb-range and yui-pb-caption classNames in their declaration. The ProgressBar itself does not use those classNames at all. They are defined as part of the SAM skin as a convenience to the implementor.

<div id="textContainers"> <div id="minValueContainer" class="yui-pb-range">0</div> <div id="maxValueContainer" class="yui-pb-range">255</div> <div class="yui-pb-caption"> <span id="valueContainer">127</span> <span id="status"></span> </div> </div>