Kontextová nápověda (tooltip)
Každý to jistě zná – najede myší na nějaký objekt a zobrazí se k němu informace, typicky v nějaké „bublině“. Umí to i obyčejný HTML kód (atribut title), ale to je víc „šidítko“ než cokoli jiného. Pokud chceme lepší zobrazení, je třeba se poohlédnout jinde. Například do jQuery UI, kde k tomu slouží widget Tooltip.
Ukázkat nativní kontextové nápovědy (přímo v HTML)
Funguje kompatibilně s nativními tooltipy, takže v HTML kódu webu není potřeba nic měnit. Lze ho nastylovat podle potřeby (podle grafických témat, podle druhu nápovědy, závažnosti zpráv…), animovat, pohybovat bublinami s myší apod.
$('p').tooltip();
Toto je nejjednodušší použití widgetu, které jen převede nativní nápovědu na použití widgetu (použijí se zmíněné atributy title; existuje ale možnost text předefinovat). Zobrazení je hodně podobné, ale méně závisí na prohlížeči a operačním systému.
Využití widgetu Tooltip pro zobrazení nápovědy
Animace
Když si vyzkoušíte uvedený kód, všimnete si, že je zobrazování a mizení animované (plynulé). Tuto animaci lze ovlivnit jak co do parametrů (rychlost, zpoždění atd.), ale také co do typu animace (efektu). Pak to může vypadat i úplně jinak:
var props = {
show: { effect: "bounce", duration: 500 },
hide: { effect: "slide", duration: 2000 }
};
$('p').tooltip(props);
Při zobrazování se nápověda krátce zatřese, při mizení odjede vlevo mimo stránku. Animaci lze také zcela vypnout, pokud se show, resp. hide nastaví na hodnotu false.
Nastylování
Ke globálnímu nastylování lze použít třídy ui-tooltip (kontejner bubliny) a ui-tooltip-content (obsah bubliny). Je-li ale například potřeba použít jiné barvy pro určitý typ elementů, musí se na to jít trochu jinak. V JavaScriptu bude:
$('p.warning').tooltip({ tooltipClass: 'tooltip-warning' });
A do CSS se potom umístí něco jako toto:
.tooltip-warning {
background-color: red;
color: yellow;
}
Zobrazí se tak červená bublina se žlutým textem.
Speciálně nastylovaná kontextová nápověda
Další možnosti
Widget Tooltip toho umí ještě o dost víc. Mějme například tento kód:
var props = {
track: true,
content: getTooltipContent
};
$('p').tooltip(props);
Parametr track způsobí, že se bude bublina pohybovat s kurzorem myši. Parametr content umožňuje buď přímo předat nějaký obsah (nejen textový, ale obecně HTML), nebo využít funkci, jako je tomu v tomto příkladu (getTooltipContent()). Další možnosti práce s widgetem Tooltip najdete v dokumentaci.
Číselníky
Číselník čili spinner je ovládací prvek umožňující snadno nastavovat čísla. Nejčastěji se používá v případech, kdy se číslo mění v malém rozsahu a je proto vhodné umožnit rychlé nastavování myší. Dříve nebyla vůbec možnost pracovat s takovým prvkem v holém HTML, nativní prvek (element input s typem number) v HTML5 není ještě úplně široce podporován (je jen v relativně nových verzích prohlížečů).
Nativní číselník v HTML5
Proto je mnohdy výhodnější použít přímo widget Spinner z jQuery UI, který implementuje široce použitelný číselník s dalšími funkcemi. Mějme HTML kód:
<input type="text" id="spinner" value="0">
Je to tedy obyčejné textové vstupní pole (číselníkové pole HTML5 nepoužívejte, jinak tam budou ovládací tlačítka dvakrát). K němu doplníme funkci číselníku velmi snadno:
$('#spinner').spinner();
Výsledkem je následující ovládací prvek:
Číselník vytvořený widgetem Spinner
Parametrizace
Jak je výše uvedený příklad jednoduchý, tak je „hloupý“. Neumí například takovou základní věc, jako je horní a dolní mez číselných hodnot, v praxi obvykle nezbytnost. Můžeme tam ale limity přidat:
var props = {
min: 0,
max: 10
};
$('#spinner').spinner(props);
Toto umožní „naklikat“ jen čísla 0 – 10, mimo tento rozsah uživatele nepustí.
Pozor: Stále lze do pole zadat číslo mimo rozsah nebo i úplně jiný řetězec! Lze tomu zabránit buď zákazem ruční změny (pole jen k zápisu), nebo lze reagovat na událost změny a zvalidovat obsah, případně tam vrátit poslední platnou hodnotu.
Následující příklad ukazuje další možnosti parametrizace spinneru:
var props = {
min: 0,
max: 50,
step: 2,
page: 5,
incremental: false
};
$('#spinner').spinner(props);
Meze jsou jasné. Pak následuje nastavení kroku, o kolik se hodnota změní po kliknutí na tlačítko šipky nebo po stisku klávesy šipky. Parametr page určuje, o kolik změnit hodnotu klávesami Page Up a Page Down. A konečně parametr incremental říká, zda se má při delším držení tlačítka zrychlovat nebo ne (ve výchozím stavu se zrychluje, zde se to vypíná).
Nastylování a další možnosti
Číselníky lze stylovat pomocí tříd ui-spinner (vnější kontejner), ui-spinner-input (původní element pole), ui-spinner-button (tlačítka pro ovládání hodnoty), ui-spinner-up a ui-spinner-down (tlačítko nahoru, resp. dolů).
Widget Spinner podporuje specifické číselné formáty (včetně finančních hodnot), ovšem potřebuje k tomu podporu frameworku Globalize. Na něj se podíváme někdy v budoucnu.
Nabídky (menu)
U webů a webových aplikací je často potřeba vytvářet různé nabídky (menu). V HTML je lze řešit jen staticky, pro ty dynamické sáhneme k widgetu, který je součástí jQuery UI.