Linux E X P R E S

Facebook

jQuery (38) – widgety v jQuery Mobile

jQuery

Množina widgetů v jQuery Mobile sice není tak bohatá jako v klasickém desktopovém jQuery UI, i tak jsou jejich možnosti velmi zajímavé. 


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 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 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 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 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 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ů 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 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 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ů.

Diskuze (0) Nahoru