Widget má za úkol visualizovat průběh vykonávaného úkolu. Progress bary známe z operačních systémů, kdy např. při mazání souborů v grafickém rozhraní se nám visuálně ukazuje, kolik procent je z úkolu hotovo.
Tento widget si klade za cíl přinést možnost visualizovat průběhy úkolů ve webových aplikacích. Visuálně je sice dosti podobný tagu meter, ale sémanticky správné je použít pro zobrazení průběhu tag progress.
Vychází ze specifikace W3C. Pokud není HTML5 progress dostupný, vytvoří vlastní za pomocí HTML elementů span a em.
var progress = new JAK.Progress({max:50, value:10}); // vytvoříme ukazatel průběhu s max. hodnotou 50 a aktuálně nastavenou na 10
var container = progress.getContainer(); // získáme vytvořený HTML element
JAK.gel("target1").appendChild(container); // připneme ho do DOMu
var progress = new JAK.Progress(); // tím, že ctor máme prázdný, vytvoříme nekonečný progress bar
var container = progress.getContainer(); // získáme vytvořený HTML element
JAK.gel("target1").appendChild(container); // připneme ho do DOMu
Animace pomocí intervalu je pouze ukázková. Daleko častěji se bude progress používat v případech, kdy pro potřebnou operaci v dávkách posíláme requesty na server. Může se jedna to zpracování velkého počtu dat, kdy odeslání vše jedním requestem by mohlo trvat dlouho.
V tomto případě se hodí uživateli průběžně ukazovat, do jaké míry je operace hotova.
var progress = new JAK.Progress({max:50, value:0}); // vytvoříme ukazatel průběhu s max. hodnotou 100 a aktuálně nastavenou na 95 spolu s dalšími nastavenými hodnotami
var container = progress.getContainer(); // získáme vytvořený HTML element
JAK.gel("target1").appendChild(container); // připneme ho do DOMu
function animuj() {
var value = progress.getValue() + 1;
if (value > progress.getMax()) { value = 0; }
progress.setValue(value);
}
var interval = setInterval("animuj()",500);