Tlačítka
Tento druh widgetů důvěrně známe z jQuery UI. V mobilním frameworku jsou prakticky stejné, i když rozdíly se najdou. První je možnost deklarativního použití, s nímž už jste měli možnost se setkat v jednom z předchozích dílů. Další rozdíly se týkají způsobu zobrazení.
<a href="#" data-role="button" data-icon="plus" id="button-add">Přidat…</a>
Tohle už znáte. Je to deklarativně vytvořené tlačítko pro přidání něčeho.
Tlačítko v jQuery Mobile
V javascriptovém kódu je pak samozřejmě potřeba reagovat na stisk tlačítka.
$('#button-add').click(function() {
…
});
Může to být ovšem ještě jednodušší, protože jQuery Mobile automaticky zpracovává elementy input s typem button, submit a reset. Tam ani není potřeba nastavovat atribut data-role. Na druhou stranu lze tlačítko vytvořit i imperativně z libovolného elementu:
$('#button').button();
Tlačítka nemusejí mít jen výchozí vlastnosti (plus věci typu ikon, viz výše), ale lze je i upravovat – a to opět jak deklarativně, tak imperativně.
<input type="button" value="Tlačítko" data-icon="star" data-corners="false" data-iconpos="right" data-mini="true">
Toto tlačítko (vytvořené z klasického HTML elementu) bude mít hranaté rohy, ikonu umístěnou vpravo a bude zmenšené (ve svislém směru). Uvedené parametry (samozřejmě bez data-) lze také předat ve formě položek objektu do metody button(), jak je to v takových případech obvyklé.
Modifikované tlačítko
Zaškrtávátka a přepínače
Zaškrtávátko (checkbox) a přepínač (radio button) jsou dvě podoby téhož widgetu Checkboxradio. Podívejme se nejdřív na první z podob. Opět lze postupovat deklarativně:
<label><input type="checkbox" name="permlogin" id="permlogin">trvalé přihlášení</label>
Zaškrtávací políčko v jQuery Mobile
Jak vidíte, oproti úplně obyčejnému checkboxu z HTML se to vůbec neliší. Podobně jako tlačítko, také zaškrtávátko má svoji zmenšenou verzi. Chcete-li checkbox vytvořit imperativně, je to také jednoduché, ale v podstatě není důvod to dělat. Zajímavější je seskupování prvků a přidání legendy:
<fieldset data-role="controlgroup"> <legend>Zaškrtněte:</legend> <input type="checkbox" name="permlogin" id="permlogin"> <label for="permlogin">trvalé přihlášení</label> <input type="checkbox" name="ipaddr" id="ipaddr"> <label for="ipaddr">kontrolovat IP adresu</label> </fieldset>
Legenda se zde standardně zobrazí nad zaškrtávátky. Seskupení má jen grafický význam, nikoli funkční. Příklad ukazuje i to, že pokud popisek není kontejnerem checkboxu, je potřeba použít atribut for.
Skupina zaškrtávátek
Přepínače se vytvářejí úplně stejně. Nemá valný smysl vytvářet jen jeden prvek, čili obvykle budeme pracovat přímo s celou skupinou tvořící přepínač:
<fieldset data-role="controlgroup"> <legend>Zvolte barvu:</legend> <input type="radio" name="color" value="red" id="red" checked="checked"> <label for="red">červená</label> <input type="radio" name="color" value="blue" id="blue"> <label for="blue">modrá</label> </fieldset>
Přepínač v jQuery Mobile
Standardní seskupení je vertikální, tedy zaškrtávátka nebo pole přepínače jsou nad sebou. To lze ale snadno změnit – horizontální seskupení je v mnoha případech velmi užitečné.
<fieldset data-role="controlgroup" data-type="horizontal"> … </fieldset>
Horizontální uspořádání skupiny prvků
Události a jejich obsluha fungují stejně jako v klasickém jQuery UI.
Posuvné přepínače
Pro ovládání stavu typu ano/ne, resp. zapnuto/vypnuto (obecně zkrátka dva stavy) se s oblibou využívá posuvný přepínač (který je někdy názornější než zaškrtávátko nebo běžný přepínač). V jQuery Mobile je reprezentován widgetem Flipswitch.
Základem pro posuvný přepínač může být checkbox. Deklaruje se úplně normálně, jen se mu změní role:
<label for="network">Síťová komunikace:</label> <input type="checkbox" id="network" data-role="flipswitch">
Posuvný přepínač v jQuery Mobile
Tento přepínač má stavy on/off. Potřebujeme-li nějaké jiné, je možnost je nastavit takto:
<input type="checkbox" id="speed" data-role="flipswitch" data-on-text="10" data-off-text="100">
Posuvný přepínač s jinými texty
Jako základ může posloužit také element select. To se hodí v případech, kdy potřebujeme nastavit nejen popisky stavů, ale i přímo odpovídající hodnoty.
<select id="wifi" data-role="flipswitch"> <option value="24g">2,4 GHz</option> <option value="5g">5 GHz</option> </select>
Více widgetů
Pojednání o widgetech není rozhodně u konce, pokračovat budeme příště a podíváme se například na panely nástrojů.
