Mobilní aplikace Design / Dev Začátečník průvodce jQuery Mobile

Během posledních 2-3 let jsme zaznamenali obrovský nárůst podpory prohlížečů a OS pro mobilní webové stránky. Nejvíce pozoruhodně přicházejí na mysli platformy Apple iOS a Google Android. Ostatní, jako jsou PalmOS a Blackberry, jsou však stále ve směsi. Až donedávna bylo velmi obtížné přizpůsobit jeden mobilní motiv všem těmto platformám.

JavaScript byl začátek, ale dosud neexistovala žádná skutečně sjednocená knihovna. jQuery Mobile má všechny nejlepší funkce jQuery a porty je přenese na mobilní webový zdroj. Knihovna je spíše rámcem, který obsahuje animace, přechodové efekty a automatické styly CSS pro základní prvky HTML. V této příručce doufám, že představím platformu tak, abyste se mohli cítit pohodlně při tvorbě vlastních mobilních aplikací jQuery.

Funkce a podpora operačního systému

Důvod, proč navrhuji, aby se jQuery Mobile naučil, je jednoduchost. Kód byl postaven na jádru jQuery a má aktivní tým vývojářů psaní skriptů a editaci chyb. Mezi mnoho funkcí patří podpora HTML5, navigační odkazy poháněné Ajaxem a obslužné rutiny pro dotykové / švihové události.

Podpora se mezi telefony liší a je rozdělena do tří kategorií z A-C. A je top tier, který se může pochlubit plnou podporou jQuery Mobile, B má vše kromě Ajaxu, zatímco C je základní HTML s malým JavaScriptem. Naštěstí je většina populárních operačních systémů plně podporována - přidal jsem níže uvedený seznam jen několika příkladů.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Pokud se chcete dozvědět více, zkuste si přečíst na oficiální stránce docs. Není to napsáno v blábolení a ve skutečnosti se cítí velmi snadno následovat. Nyní se zaměřme na základy psaní mobilní stránky jQuery a jak můžeme vytvořit malou aplikaci!

Standardní šablona HTML

Chcete-li, aby vaše první mobilní aplikace fungovala, musíte nastavit šablonu. To zahrnuje základní kód jQuery spolu s mobilním JS a CSS, všechny externí hostované z jQuery CDN. Podívejte se na můj příkladový kód níže.

Jedinými cizími prvky by zde měly být dvě meta tagy. Vrchol výřez tag aktualizuje mobilní prohlížeče tak, aby používaly plný zoom. Nastavení hodnoty width = šířka zařízení nastaví šířku stránky přesně na šířku obrazovky telefonu. A co je nejlepší, nezakazuje funkce zoomu, protože jQuery Mobile se může přizpůsobit posunům rozvržení.

Další meta tag Kompatibilní s X-UA pouze donutí Internet Explorer, aby vykreslil HTML v jeho poslední iteraci. Starší prohlížeče a zejména mobilní se pokusí obejít neznámé renderovací chyby.

Konstrukce tělesného obsahu

Teď je to místo, kde jQuery mobile může být složité. Každá stránka HTML není nutně 1 stránka v mobilním webu. Rámec využívá datových atributů HTML5, které můžete vytvořit při rozmaru připojením data- předem. Podobným způsobem data-role = "stránka" lze nastavit na více divs v jediném HTML souboru, což vám poskytne více než jednu stránku.

Pak byste mezi těmito stránkami přesouvali kotevní odkazy a jedinečné ID. Toto nastavení je dobrý nápad pro základní, jednoduché aplikace. Pokud potřebujete pouze 3 až 5 stránek, proč to neukládat do jediného souboru? Pokud nemáte mnoho písemného obsahu, v takovém případě zkuste pomocí PHP ušetřit čas.

Pokud jste ztraceni, zkontrolujte níže uvedený příklad kódu.

 
 
 
Horní záhlaví
 
 
 
Zobrazit další stránku??
 
nápověda: klikněte na tlačítko níže!
 
O nás
 
  
 
 
 
Page 2 Zde
 
 
 
jen něco navíc.
 
Můžu vrať se kdykoliv.
 
 
   

Na chvíli se podívejte na odkaz kotvy z indexové stránky. Upozornění Přidal jsem atribut data-role = "button" pro nastavení odkazu jako tlačítka. Namísto použití výchozích stylů však používáme data-theme = "c". Přepíná mezi 1 z 5 šablon (témat a-e), které jsou standardně dodávány jako styly CSS v rámci jQ Mobile.

Moje tlačítko také pokrývá celou šířku stránky. Chcete-li odstranit chování, musíme nastavit prvek z bloku na inline zobrazení. Atributem pro to je data-inline = "true" které můžete připojit na jakékoli kotevní tlačítko.

Sloupce záhlaví a zápatí

Podél horní a dolní části aplikací byste měli přidat obsah záhlaví a zápatí. Tento designový styl je často přisuzován iOS aplikacím, které se poprvé staly populárními pomocí Apple App Store. jQ Mobile používá atributy datové role k definování obsahu záhlaví, zápatí a stránky. Podívejme se stručně na tyto oblasti.

Tlačítka horní lišty

Ve výchozím nastavení horní panel podporuje sadu dvou (2) odkazů podobným způsobem jako ostatní mobilní aplikace. iOS výchozí nastavení pomocí a “zadní” tlačítko vlevo a často “možností” nebo “config” napravo.

 
 Nastavení 
Page 2 Zde
 
 

Výše uvedený kód se zaměřuje pouze na kontejner div pro naši stránku O. spolu s obsahem záhlaví. Další atribut HTML data-add-back-btn = "true" bude fungovat pouze při přidání na roli dat stránky. Účelem je automaticky zahrnout tlačítko zpět, které funguje podobně jako tlačítko zpět v prohlížeči.

Mohli jsme přidat tlačítko zpět ručně s podobným kódem, jaký jsme použili v oblasti obsahu. Ale cítím, že to trvá mnohem déle, než nastavit zejména na více stránkách. Všechny kotevní odkazy v sekci záhlaví budou standardně nastaveny na pozici levého / pravého tlačítka. Používáním class = "ui-btn-right" Tímto jsem přepnul tlačítko Nastavení, takže je zde volné místo pro tlačítko Zpět. Také používám sekundární styly motivů, abych to udělala trochu navíc!

Navigace v zápatí

Oblast zápatí se zpočátku necítí velmi užitečná. Je to místo, kde můžete ukládat informace o autorských právech a důležitější odkazy, ale to by mohlo být stejně snadno přidáno v dolní části oblasti obsahu. Takže to, co je dobré, zápatí?

Nejlepším příkladem, který jsem viděl, je využití prostoru zápatí jako navigačního systému, ve kterém se odkazy na kartu zobrazují při ovládání navigace po stránce. Existuje spousta možností, kde můžete vybrat efekty na celé obrazovce, přidat ikony, upravit umístění a několik dalších atributů. Ale vytvořme jednoduchou zápatí nav s 3 tlačítky, abychom získali představu o tom, jak to funguje.

• Náhled Live Demo

Tady je nějaký kód zápatí pro sekci o stránce. data-role = "navbar" by měl být přidán na prvek kontejneru, který obsahuje neuspořádaný seznam, a NENÍ samotný prvek UL. Každý odkaz v seznamu je považován za panel karet, který se pak rovnoměrně rozdělí podle celkového počtu odkazů. Další třída ui-body-b jen přidává estetické efekty, když přepínáme mezi několika málo dostupnými styly.

Pokud si všimnete na prvním tlačítku, mám atribut data-direction = "reverzní". I když jsem mohl použít nastavení tlačítka zpět, aby se vrátil na domovskou stránku, místo toho jsem použil ID stránky #index. Ve výchozím nastavení bude okno aplikace přecházet doprava, která vypadá dost lepkavě, protože očekáváte, že se animace bude pohybovat dozadu. Pokud máte čas, můžete hrát s ještě více těmito animovanými efekty. Podívejte se na stránku s informacemi o přechodu v dokumentaci jQuery.

Ajax a dynamické stránky

První segment opravdu otevřel klíčové body pro budování mobilní aplikace s jQuery. Ale chci spustit novou aplikaci, která načítá data z externí stránky. Budu používat velmi jednoduchý PHP skript k dosažení $ _REQUEST [] variabilní a odpovídajícím způsobem zobrazit malý Dribbble shot. Obrazovka níže by vám měla dát představu, co budeme stavět.

Nejprve nastavím stránku index.html na výchozí šablonu. Pro tuto domovskou obrazovku používám nastavení zobrazení seznamu pro zobrazení každého odkazu v pořadí. To se provádí v oblasti obsahu pomocí a data-role = "listview" atribut v seznamu kontejneru. Vyřezal jsem stejné záhlaví jako dříve, přidal jsem celý kód z této nové stránky indexu níže.

 
 
 
Říjen 2011 Záběry
 
 
 
 
První obrázek
 
Druhý obrázek
 
Třetí obraz
 
Čtvrtý obraz
 
 
  
   

Každé z kotevních odkazů v mém seznamu ukazuje na stejný soubor - index.php. Ale míjíme v parametru imgid jako proměnná požadavku. V souboru image.php vezmeme ID a otestujeme jej proti 4 přednastaveným hodnotám. Pokud se nějaká shoda použije, použijeme odpovídající adresu URL obrázku a název, jinak zobrazíme pouze výchozí Dribbble shot.

Script pro načítání obrázků

Skript image.php stále obsahuje výchozí kód mobilní aplikace jQuery přidaný do kódu. Ve skutečnosti sdílí velmi podobné záhlaví a zápatí, s výjimkou přidání atributu zpětného odkazu data-add-back-btn = "true". Všimněte si, že toto tlačítko se zobrazí pouze tehdy, když pocházíme z index.html! Zkuste přímo načíst image.php a nic se neobjeví, protože není “zadní” přesunout.

Myslím, že můžeme udělat trochu větší smysl pro kód zkoumáním logiky PHP. Používáme přepínač / případ metodu pro kontrolu proti 4 různým ID a poskytnout nadpis záhlaví, adresu URL obrázku a odkaz zdroje původního umělce.

Vše se zdá být poměrně jednoduché - i nováček PHP dev by měl být schopen následovat! A pokud nechápete, že to není důležité pro kód jQuery tak, tak se nemusíte bát. Měli bychom nyní přepnout a podívat se na šablonu, kterou jsem vytvořil na této nové stránce. Veškerý HTML kód je přidán po celém výše uvedeném PHP bloku. Použil jsem ID “snímky” pro kontejner a dokonce nastavit záhlaví pro změnu s každou novou fotografií.

 
 
 
 
 
 Zobrazit originál
 
 
  
 

Pravděpodobně uvidíte, jak je toto demo zjednodušené. Celým cílem je však ukázat škálovatelnost mobilního telefonu jQuery. PHP může být snadno přidáno do mixu a můžete jen tak pár hodin vývoje vynechat některé skutečně upravené aplikace.

Fancy Design se seznamem miniatur

Posledním přidaným efektem, který můžeme implementovat, je použití miniatur pro oživení stránky s výpisy. Také se chystám rozdělit text do pole nadpisu a popisu, aby se zobrazil název uměleckého díla i jméno autora.

Chcete-li otevřít aplikaci Photoshop a vytvořit dokument 80 × 80 px. Rychle změním velikost každého obrázku a uložím miniatury, aby odpovídaly každému. Pak aktualizujeme položky zobrazení seznamu, měli bychom zahrnout několik dalších prvků.

Podívejte se na níže uvedený kód a ukázkový příklad, abyste zjistili, co tím myslím.

[Náhled živého demo]

 
 
  
Wunderkit úkoly
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeeee
 
Scott Hill
 
  
Fórum aplikace pro Facebook
 
Ionut Zamfir
 
  
Cvrlikání
 
Sam Jones
 
 
 

Třídy pro ui-li-nadpis a ui-li-desc jsou standardně přidány do šablony stylů jQuery Mobile. To je podobné třídě obrázků ui-li-thumb který automaticky změní velikost každého panelu zobrazení podle výšky obrazu. Odtud můžete stavět více na frontendu s animacemi, efekty stránek, styly a podobně.

Nebo alternativně můžete začít budovat backendový systém pro nahrávání nových obrázků a automatické ořezávání miniatur, které budou zahrnuty do seznamu. S aplikací jQuery Mobile je tolik flexibility, že ji téměř nemůžete označit pouze jako knihovnu JavaScript. Jedná se spíše o celý rámec HTML5 / CSS / jQuery pro vytváření rychlých a škálovatelných mobilních aplikací.

Závěr

Jak psát tento článek jQuery Mobile tým oficiálně vyřadil RC1.0 knihovny kódů. To znamená, že většina, pokud ne všechny hlavní opravy chyb byly zmáčknuty a nyní testeři se připravují na plné vydání. Z tohoto důvodu na webu nenajdete spoustu informací.

Ale jak měsíce předem webové vývojáře určitě vyzvednout trend. Mobilní aplikace a dokonce i mobilní webové rozložení roste v popularitě s obrovským nárůstem smartphonů. Weboví vývojáři nemají čas se naučit úplný programovací jazyk pro vytváření aplikací Android / iOS. JQuery Mobile je tedy štíhlá alternativa, která zahrnuje podporu většiny softwaru pro mobilní průmysl a stále roste každým dnem s aktivní komunitou vývojářů..