Basic Usage
var progressBar;
window.onload = function(){
progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
progressBar.setPercent(60);
}
Usage
var progressBar;
window.onload = function(){
//Create new progress bar
progressBar = new ProgressBar("my-progressbar", {'width':'100px', 'height':'4px'});
var oName = ProgressBar.OPTION_NAME;
var oValue = ProgressBar.OPTION_VALUE;
//Create new item
barItem = {};
barItem[oName.ITEM_ID] = "item1";
barItem[oName.TYPE] = oValue.TYPE.BAR;
barItem[oName.OPACITY] = 0.2;
barItem[oName.SPACE] = 0;
barItem[oName.ALIGN] = oValue.ALIGN.RIGHT;
barItem[oName.POSITION] = oValue.POSITION.RELATIVE;
barItem[oName.COLOR_ID] = oValue.COLOR_ID.YELLOW;
barItem[oName.PERCENT] = 0;
progressBar.createItem(barItem);
//Change percent
progressBar.setPercent(60, "item1");
//Event listener: CHANGED
progressBar.getElement().addEventListener(ProgressBar.EVENT.CHANGED,
function($event){
document.getElementById('my-progressbar-text4').innerHTML = $event.detail.me.getPercent() + '%';
});
//Change percent after event listener
progressBar.setPercent(80, "item1");
//Change other options
//progressBar.setOptionValue(oName.OPACITY, 1.0, "item1");
//progressBar.setOptionValue(oName.SPACE, 20, "item1");
//progressBar.setOptionValue(oName.ALIGN, oValue.ALIGN.LEFT, "item1");
//progressBar.setOptionValue(oName.POSITION, oValue.POSITION.ABSOLUTE, "item1");
//progressBar.setOptionValue(oName.COLOR_ID, oValue.COLOR_ID.RED, "item1");
//progressBar.setPercent(60, "item1");
}