Co je jQuery Mobile
Při vývoji mobilních či responzivních webových aplikací si lze vystačit s běžnými frameworky jQuery a jQuery UI. Ty však neobsahují podporu pro uživatelské interakce specifické pro mobilní telefony, tablety, navigace a další zařízení s dotykovými displeji a zároveň bez vstupních zařízení používaných u „velkých“ počítačů.
Proto vznikl framework jQuery Mobile, který specifika mobilních zařízení dokáže využít. Co všechno tento framework nabízí?
- speciální widgety vhodné pro mobilní přístroje (rozbalovatelné widgety, posuvný přepínač, panel, tabulka s automaticky skrývanými sloupci…)
- události typické pro dotykové ovládání (krátký/dlouhý dotyk, posun, změna orientace…)
- ikony ve formátech SVG a PNG
- sloupcový layout, responzivní mřížku
- grafická témata a CSS třídy
Na speciálních stránkách se můžete podívat, jak je na tom jQuery Mobile s podporou různých prohlížečů. Dá se říci, že až na výjimky (velmi staré prohlížeče) je framework podporován výborně.
Kde získat a jak použít
Podobně jako jQuery UI, také jQuery Mobile pro svoji činnost potřebuje jQuery. Není ale třeba se o to starat, protože ať už využijete kterýkoli postup, jeho součástí je i použití tohoto frameworku.
Nejjednodušší je samozřejmě vložit soubory z CDN, protože není nutné nic stahovat ani umísťovat na server. Projekt jQuery má vlastní CDN využívající službu MaxCDN, takže logickou volbou je tato možnost. Dále můžete využít i CDN firem Google nebo Microsoft. Odkazy najdete na stahovací stránce.
Pro ladění použijete nekomprimovanou verzi, pro ostrý provoz je vhodnější verze minifikovaná a komprimovaná. U CSS si můžete navíc vybrat, zda má soubor obsahovat i standardní téma či nikoli. Druhý případ využijete v případě, že máte téma vlastní.
Dále je samozřejmě možnost si soubory stáhnout a uložit na svůj server, a to buď v kompletní podobě, nebo v podobě připravené pomocí Download Builderu (podobného jako u jQuery UI). Ten umožňuje zaškrtnout jen ty komponenty, které chcete do balíčku zahrnout (pokud využijete jen malou část a chcete mít soubory co nejmenší).
Ve všech případech pak samozřejmě musíte vložit do HTML odkazy na jednotlivé soubory, ať už vzdálené nebo místní (myšleno na stejném serveru).
Nevyhovuje-li vám základní grafické téma, můžete si vytvořit téma vlastní. Pohodlně k tomu poslouží nástroj ThemeRoller– s ním si můžete témata doslova „naklikávat“, prohlížet vzájemně porovnávat atd.
Základní koncepty jQuery Mobile
Přestože jQuery Mobile vychází ze stejných základů jako jQuery a jQuery UI, zavádí zcela nové koncepty, s nimiž je pro efektivní práci potřeba se seznámit. Každá stránka je tvořena stromovou strukturou odpovídající následující podobě:
- stránka (nejvyšší úroveň, přímo pod body)
- hlavička (horní lišta)
- obsahová část (hlavní obsah)
- patička (dolní lišta)
Příště se podíváme, jak tato struktura vypadá v HTML. Pro tuto chvíli je důležité si říct, že žádná z těchto součástí není povinná. Navíc stránek (a tedy celých struktur) může být v jednom souboru více. Rozlišují se pomocí identifikátorů (atribut id) a lze na ně odkazovat pomocí kotev (#něco).
Další specifickým konceptem je využití atributu data-role. Ten se využívá k vytváření widgetů z elementů v HTML. Jde tedy o deklarativní přístup, kdy se základ programu tvoří deklaracemi (v tomto případě pomocí speciálního atributu) namísto volání metod, které se využívá u imperativního přístupu, jak ho známe z jQuery UI.
Obdobně se deklarují také ikony (atribut data-icon), případně jejich pozice (data-iconpos) a dokonce i téma (data-theme).
Používání popsaných konceptů není povinné, ale je nejjednodušší a zároveň nejčistší cestou k využití frameworku. Pokud chce někdo něco udělat jinak, měl by k tomu mít pádné důvody.
Začínáme s jQuery Mobile
Obecný úvod je u konce, příště už se podíváme na to, jak s jQuery Mobile vytvořit jednoduchou fungující aplikaci.