404 Not Found

Not Found

The requested URL /banner.php was not found on this server.

přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (33) – úvod do jQuery Mobile

404 Not Found

Not Found

The requested URL /banner.php was not found on this server.

jQuery (33) – úvod do jQuery Mobile

jquery.png

Přestože lze mobilní webové aplikace implementovat i s běžným jQuery a jQuery UI, speciální mobilní framework dokáže lépe využít specifika telefonů a tabletů.


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.

404 Not Found

Not Found

The requested URL /banner.php was not found on this server.



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.

Nahoru

Příspěvky

jQuery (33) – úvod do jQuery Mobile
Ivan 12. 01. 2017, 13:03:00
Odpovědět  Odkaz 
Japato vypadá s dalším dílem? :)
Lukáš Jelínek Re: jQuery (33) – úvod do jQuery Mobile
Lukáš Jelínek 12. 01. 2017, 23:28:46
Odpovědět  Odkaz 
Další díl je tady: https://www.linuxexpres.cz/software/jquery-34-zaklad-mobilni-aplikace-v-jquery-mobile

Bohužel se ve struktuře seriálu někam zatoulal. Podívám se na to a přesunu ho na správné místo. Díl č. 35 vyjde v pondělí.

Přidat názor

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře a podniká v oblasti informačních technologií. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog