Tlačítka v HTML a jejich limity
Každý zná tlačítka ve formulářích na webových stránkách. Tato tlačítka, ať už k odesílání nebo dalším akcím, jsou už mnoho let součástí jazyka HTML a bez nich by formuláře prakticky nešly řešit. Původně bylo k dispozici tlačítko jako forma elementu input, později přibyl ještě univerzálnější element button.
Tlačítko v prohlížečích Firefox a Chromium (distribuce Linux Mint)
Oba zmíněné elementy lze do určité míry stylovat, používat místo základní podoby vlastní obrázky, ovlivňovat jejich chování (například je aktivovat/deaktivovat) a zachytávat z nich události. Jenže výchozí vzhled těchto tlačítek se liší podle prohlížeče, jeho verze, operačního systému atd. Proto nezbývá, než si tlačítka upravit. Dělat to od základu by ale byla zbytečná práce navíc, protože v jQuery UI je připraven widget Button, který tyto věci řeší.
Widget Button
Button je widget jQuery UI, který v první řadě aplikuje na tlačítkový element jednotný styl použitého grafického tématu. Tlačítka mohou být klasická, tedy vracející se po stisku do výchozího stavu, ale i zaškrtávátka nebo přepínače.
Tlačítko realizované pomocí widgetu Button může nést text, jednu či dvě ikonu nebo kombinaci obojího. Widget tam může figurovat na stránce například jako klasické formulářové tlačítko, tlačítko na panelu nástrojů nebo součást pásu karet (ribbonu).
Tlačítka realizovaná elementem input (konkrétně button, submit, reset) mohou být pouze textová. Potřebujete-li na nich mít ikony, můžete to obejít tím, že použijete element button a funkce pro odeslání, resp. vymazání formuláře zajistíte JavaScriptem.
Vytvoření widgetu a práce s ním
Pokud potřebujeme vytvořit úplně obyčejné tlačítko, může HTML kód vypadat přibližně takto:
<button id="tlacitko">Tlačítko</button>
Instanci widgetu Button z něj potom vyrobíme jednoduchým kusem JavaScriptu:
$('#tlacitko').button();
Toto tlačítko bude samozřejmě textové (text bude „Tlačítko“). Na jeho stisk můžeme reagovat obvyklým způsobem:
$('#tlacitko').click(function() {
…
});
Vzhled tlačítka bude odpovídat tématu, lze si ho ale samozřejmě upravit podle svého (viz dále).
Tlačítko s widgetem Button (vypadá ve všech prohlížečích stejně)
Použití ikon
Chceme-li mít na tlačítku také ikonu, přidáme ji do parametrů při vytváření widgetu:
var params = {
icons: {
primary: 'ui-icon-copy'
}
};
$('#tlacitko').button(params);
S ikonami se pracuje tak, že se do parametrů nedává URL obrázku, nýbrž CSS třída odpovídající příslušné ikoně. K dispozici je mnoho ikon pro běžné účely. Například v příkladu se použije ikona operace kopírování. Pomocí CSS vlastnosti background-image a dalších si lze připravit vlastní třídy pro ikony.
Tlačítko s ikonou
Uvedený příklad využívá pouze jednu ikonu – tu primární, která se standardně zobrazí na levé straně tlačítka. Můžeme použít i druhou ikonu (sekundární), zobrazenou na pravé straně:
var params = {
icons: {
primary: 'ui-icon-copy',
secondary: 'ui-icon-star'
}
};
Zaškrtávátka
Pro tyto ovládací prvky je potřeba využít element input. Aby vše fungovalo správně, musí být popisek (element label) propojen s prvkem prostřednictvím identifikátoru a nesmí být jeho kontejnerem. HTML kód by tedy vypadal například takto:
<input type="checkbox" id="persistent-login" name="persistent"> <label for="persistent-login">trvalé přihlášení</label>
Toto obyčejné zaškrtávátko se snadno převede na widget Button:
$('#persistent-login').button();
zaskrtavatko.png, Zaškrtnuté zaškrtávátko (má vzhled běžného tlačítka; lze to změnit přes CSS)
Pozor na to, když se stav zaškrtávátka změní z programu (tedy neudělá to uživatel). Pak je potřeba říct widgetu, aby se překreslil, protože to neudělá automaticky:
$('#persistent-login').button('refresh');
Přepínače
U přepínače je to velmi podobné jako u zaškrtávátka. Často ale potřebujeme jednotlivé volby vizuálně seskupit – to už si ale nevystačíme s widgetem Button a musíme si vzít na pomoc další widget: Buttonset. Ten je určen pro sadu tlačítek (libovolných, nejen přepínačových) a zajistí i vytvoření widgetů pro jednotlivá tlačítka, takže ušetří práci.
<fieldset id="color-sel">
<legend>Barva</legend>
<input type="radio" id="color-red" name="color" checked="checked"> <label for="color-red">červená</label>
<input type="radio" id="color-green" name="color"> <label for="color-green">zelená</label>
</fieldset>
Element fieldset tu zafunguje jednak jako kontejner pro zpracování widgetem, současně má ale význam i pro přístupnost (umožňuje definovat legendu). Na toto nyní aplikujeme widget Buttonset:
$('#color-sel').buttonset({ items: 'input[type=radio]' });
Parametr items říká, které elementy se mají začlenit do skupiny a vytvořit pro ně widgety. V tomto případě to budou elementy input typu radio.
Přepínač ve výchozím stavu
Podobně jako to bylo u interakčních widgetů, také tady lze parametry měnit i za provozu pomocí metody option. Další informace najdete v dokumentaci.
Další widgety
V příštím dílu se podíváme na ukazatele průběhu a posuvníky. Ty už ve standardním HTML k dispozici nejsou, ale přitom je často potřebujeme používat.