Ukazatel průběhu čili progressbar
Uživatelé bývají netrpěliví a jakmile nějaká činnost trvá déle, mohou mít pochybnosti, zda aplikace stále ještě dělá, co dělat má (a například nezůstala někde viset). Proto se používají ukazatele průběhu. Mohou ukazovat činnost o předem určené délce (například zpracování určitého počtu prvků), ale i činnost bez známé délky (kupříkladu přenos dat ze serveru, kdy se neví, kolik jich bude).
Jakékoli činnosti, u nichž se předpokládá doba trvání nad 1 sekundu, je dobré indikovat ukazatelem průběhu (případně jinak, ale to není předmětem článku). K dobré praxi patří, aby měl uživatel možnost činnost přerušit a současně aby nemohl udělat jinou akci, která by do probíhající činnosti nevhodně zasáhla.
Jak správná funkce indikace průběhu, tak možnost akci přerušit, vyžaduje využívat asynchronnost komunikace se serverem. Pokud se komunikuje synchronně, webový prohlížeč s vykonáváním dalšího javascriptového kódu čeká, což může trvat i velmi dlouho.
Indikace činnosti o známé délce
K implementaci posuvníku slouží v jQuery UI widget Progressbar. Jako podkladový element může sloužit například div:
<div id="progressbar"></div>
Widget se pak vytvoří velmi jednoduše:
$('#progressbar').progressbar();
Takto vznikne ukazatel, jehož maximální hodnota je 100 (minimální je vždy nula), takže pokud máme hodnotu převedenou na procenta, není potřeba maximum nastavovat. Lze ale zobrazovat i přímo hodnotu, pokud se maximum nastaví:
$('#progressbar').progressbar({ max: 360 });
Pak už zbývá jen zajistit aktualizaci hodnoty, jakmile dojde k vykonání příslušné části činnosti:
var pb = $('#progressbar');
for (var i = 1; i <= 360; i++) {
…
pb.progressbar('option', 'value', i);
}
Výsledek může vypadat například takto:
Ukazatel průběhu (ukazuje 30 %)
Vzhled ukazatele průběhu lze snadno měnit – ukazatel jako takový má CSS třídu ui-progressbar, vyplněná část ui-progressbar-value. První z nich lze použít například k nastavení velikosti, druhou třeba pro změnu barvy v závislosti na okolnostech.
Indikace činnosti o neznámé délce
V případě předem neznámé délky činnosti postupujeme velmi podobně jako výše, jako hodnota se však (již při vytvoření, případně později) nastaví false:
$('#progressbar').progressbar({ value: false });
Následně se už tato hodnota obvykle neaktualizuje. Pokud se však délka činnosti stane známou, lze začít hodnotu nastavovat a indikátor se chová jako pro předem známou délku. Možný je samozřejmě i opačný postup (třeba když jednotlivá operace trvá příliš dlouho).
Ukazatel indikující průběh činnosti o neznámé délce
U ukazatele pro neznámou délku činnosti lze využít CSS třídu ui-progressbar-overlay, typicky se tam nastaví animovaný obrázek (pokud nechcete použít výchozí).
Posuvník
Posuvník (slider) je ovládací prvek pro snadné nastavování číselných hodnot. Typicky se jím ovládá například jas, hlasitost, barevná složka, zvětšení apod. Základem posuvníku je jezdec (též běžec; anglicky handle), tedy prvek, za který lze zatáhnout kurzorem myši a posunout ho na požadované místo. Na koncích posuvníku bývají tlačítka s šipkami – stisk tlačítka posune jezdec o definovanou hodnotu, obvykle malou. Aktivní bývá také prostor po obou stranách jezdce (směrem k tlačítkům), kliknutí do prostoru posune jezdec daným směrem, obvykle o větší hodnotu než tlačítko.
Existují i varianty posuvníků s více jezdci. Posuvník se dvěma jezdci lze využít k nastavení intervalu, se třemi se používá u obrázků pro nastavení bílého a černého bodu a gamma korekce.
V jQuery UI je posuvník realizován pomocí widgetu Slider. Může být orientován vodorovně či svisle, mít libovolný počet jezdců a pohyb těchto jezdců může být animován. Jako základ opět poslouží například div:
<div id="slider"></div>
Z něj se vytvoří posuvník:
$('#slider').slider();
Vodorovný posuvník s jedním jezdcem
Pokud potřebujeme nastavit minimum, maximum a výchozí hodnotu, udělá se to obvyklým způsobem:
var opts = {
min: 100,
max: 200,
value: 150
};
$('#slider').slider(opts);
Takto vytvořený posuvník je orientován vodorovně. Snadno lze ale vytvořit i svislý:
$('#slider').slider({ orientation: 'vertical' });
Více jezdců, intervalový posuvník
Posuvník v jQuery UI podporuje v podstatě libovolný počet jezdců. Takto například dostaneme tři jezdce (jeden bude vlevo, druhý uprostřed a třetí vpravo):
$('#slider').slider({ values: [ 0, 50, 100] });
Posuvník se třemi jezdci (aktivní je levý jezdec – bude reagovat na klávesnici)
Pro intervalové posuvníky je k dispozici zvláštní podpora – interval lze totiž samostatně nastylovat (například obarvit). Slouží k tomu parametr range:
var opts = {
values: [0, 100],
range: true
};
$('#slider').slider(opts);
Posuvník s intervalem
Interval lze ale využít i při jediném jezdci – bude se počítat od jezdce k některé mezi posuvníku (v následujícím příkladu k maximu):
$('#slider').slider({ range: 'max' });
Získání hodnoty posuvníku, třídy pro CSS
Můžeme využít dvě cesty. Jednou je, se prostě posuvníku na aktuální hodnotu zeptat:
var v = $('#slider').slider('value');
Často ale chceme reagovat přímo na změnu hodnoty. Pak je výhodnější využít například reakci na událost change (příklad zobrazí hodnotu ve vyskakovacím okně):
var opts = {
change: function(e, ui) {
alert('Nová hodnota:' + ui.value);
}
};
$('#slider').slider(opts);
K dispozici je ještě událost slide, která toho umí víc – poradí si s více jezdci a pokud obslužná rutina vrátí false, posun do nové pozice se zruší.
var opts = {
slide: function(e, ui) {
if (…) {
return false;
}
…
return true;
}
};
$('#slider').slider(opts);
Ohledně CSS tříd je to podobné jako u ukazatele průběhu. Posuvník má třídu ui-slider (a také ui-slider-horizontal pro vodorovný, resp. ui-slider-vertical pro svislý posuvník), každý z jezdců ui-slider-handle a interval ui-slider-range.
Další widgety
Příště se podíváme na dva widgety spjaté s textovými poli – automatické doplňování a kalendář.
