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

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

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.



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, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. 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, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog



Public Relations

Vysvětleme si internet

TELE3Možná jste až do této chvíle vůbec netušili, že existuje něco jako DNS servery. A to navzdory tomu, že se s těmito při používání internetu dnes a denně setkáváte a nemůže tomu být ani jinak. Protože nebýt těchto, nebyl by internet internetem.

Pokračování ...



Public Relations

SOS Security Week - interaktivní webináře

SophosOblíbený Security SOS Week je zpátky! … na přelomu června a července proběhne další ze série Security SOS Week, která vám pomůže zjistit, jak efektivně ochráníte vaši IT infrastrukturu před hackery a že malware je zpět v plné síle a i bezpečnost vašeho soukromí má dvě strany jako mince.

Pokračování ...


Redakční blog

Pavel Fric

Pavel Fric, 21. August

Sayonara Player 1.5.1

Přehrávač, jak má být. Poslední dobou vývoj šlape


Pavel Fric

Pavel Fric, 26. January

MuseScore 3

První aktualizace třetí řady notačního editoru MuseScore


Redakce

Redakce, 21. December

Pište pro LinuxEXPRES

Baví vás Linux? Pište o něm, není to nic těžkého. LinuxEXPRES hledá nové autory.


Všechny blogy »

SOLIDWORKS