Návrh aplikácie pre mobilné aplikácie / Sprievodca pre začiatočníkov pre jQuery Mobile

V priebehu posledných 2-3 rokov sme zaznamenali obrovský nárast podpory pre prehliadač a operačný systém pre mobilné webové stránky. Najdôležitejšie je, že Apple iOS a platformy Android spoločnosti Android majú na mysli. Ale iné ako PalmOS a Blackberry sú stále v mixe. Až donedávna bolo veľmi ťažké zaradiť jednu mobilnú tému do všetkých týchto platforiem.

JavaScript bol začiatok, ale doteraz neexistovala žiadna skutočne zjednotená knižnica. jQuery Mobile využíva všetky najlepšie funkcie jQuery a prenesie ich na mobilný webový zdroj. Knižnica je skôr ako rámec, ktorý zahŕňa animácie, prechodové efekty a automatické štýly CSS pre základné prvky HTML. V tejto príručke dúfam, že platformu predstavím tak, aby ste sa cítili dobre navrhovať vlastné mobilné aplikácie jQuery.

Funkcie a podpora operačného systému

Dôvod, prečo navrhujem učiť jQuery Mobile nad inými rámcami, je jednoduchosť. Tento kód bol postavený na jQuery jadre a má aktívny tím vývojárov, ktorý píše skripty a upravuje chyby. Z mnohých funkcií patrí podpora HTML5, navigačné linky napájané službou Ajax a manipulátory udalosti dotykom / prstom.

Podpora sa líši medzi telefónmi a je rozdelená do grafu 3 kategórií z A-C. A je najvyššia vrstva, ktorá sa môže pochváliť plnou podporou jQuery Mobile, B má všetko okrem Ajaxu, zatiaľ čo C je základné HTML s malým až žiadnym JavaScriptom. Našťastie väčšina populárnych operačných systémov je plne podporovaná - pridal som zoznam nižšie len z niekoľkých príkladov.

• 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

Ak sa chcete dozvedieť viac, skúste si ich prečítať na oficiálnej stránke dokumentov. To nie je napísané bezvýrazne a skutočne sa cíti veľmi ľahko nasledovať. Teraz sa zameriame na základy písania jQuery mobilnej stránky a ako môžeme vytvoriť malú aplikáciu!

Štandardná šablóna HTML

Ak chcete získať prvú mobilnú aplikáciu, je tu nastavená šablóna, ktorú by ste mali začať. Zahŕňa základný kód jQuery spolu s mobilným JS a CSS, všetci externí hostiteľmi z jQuery CDN. Pozrite si môj príklad kód nižšie.

Jedinými cudzími prvkami by mali byť tieto dve meta tagy. Vrch výrez značka aktualizuje mobilné prehliadače a používa efekt plného zväčšenia. Nastavenie hodnoty šírka = zariadenie šírkou nastaví šírku stránky presne na šírku obrazovky telefónu. A najlepšie zo všetkých nie je zakázať funkcie priblíženia, pretože jQuery Mobile sa môže prispôsobiť posunom rozloženia.

Nasledujúca metaznačka X-UA-Compatible len vynúte Internet Explorer, aby vykreslila HTML v najnovšej iterácii. Staršie prehliadače a najmä mobilné počítače sa budú snažiť obísť neznáme chyby vykresľovania.

Vytváranie obsahu tela

Teraz je to miesto, kde jQuery mobil môže byť zložité. Každá stránka HTML nie je nevyhnutne 1 stránka na stránkach pre mobilné zariadenia. Rámec využíva atribúty údajov HTML5, ktoré môžete vytvoriť rozmarom pridaním dáta- vopred. Podobným spôsobom Data-role = "Stránka" môže byť nastavený na viac divov v jednom súbore HTML, ktorý vám poskytne viac ako jednu stránku.

Potom by ste sa pohybovali medzi týmito stránkami s kotviacimi odkazmi a jedinečným identifikátorom. Toto nastavenie je dobrý nápad pre základné jednoduché aplikácie. Ak potrebujete iba 3-5 stránok, potom prečo ich neukladať v jednom súbore? Ak nemáte veľa písomného obsahu, v takom prípade skúste použiť PHP zahŕňa ušetriť čas.

Ak ste stratený, skontrolujte nižšie uvedený príklad kódu.

 
 
 
Horný riadok titulu
 
 
 
Zobraziť ďalšiu stránku??
 
tip: kliknite na tlačidlo nižšie!
 
O nás
 
  
 
 
 
Tu je
 
 
 
len ďalší obsah.
 
Myslím, že môžete vráť sa kedykoľvek.
 
 
   

Pozrite sa na kotviace spojenie na indexovej stránke na chvíľu. Všimnite si, že som pridal atribút Data-role "tlačidlo" = na nastavenie prepojenia ako tlačidla. Ale namiesto toho, aby sme použili predvolené štýly Data-theme = "c". Toto prepína medzi 1 z 5 (tematické a-e) šablóny, ktoré sú štandardne zabalené ako štýly CSS v rámci jQ Mobile.

Moje tlačidlo tiež rozširuje celú šírku stránky. Ak chcete odstrániť toto správanie, musíme nastaviť element z bloku na inline zobrazenie. Atribút na to je dát inline = "true" ktoré by ste mohli pripojiť k akémukoľvek kotvovému tlačidlu.

Záhlavie a päty

Spolu s hornou a dolnou časťou vašich aplikácií by ste mali pripojiť obsah hlavičky a päty. Tento štýl dizajnu sa často pripisuje aplikáciám pre iOS, ktoré sa najprv stali obľúbenými pomocou mobilného App Store spoločnosti Apple. jQ Mobile používa atribúty úlohy dát na definovanie záhlavia, päty a obsahu stránky. Poďme sa pozrieť na tieto oblasti.

Tlačidlá na hornej lište

Štandardne horná lišta podporuje súbor dvoch (2) odkazov podobným spôsobom ako ostatné mobilné aplikácie. iOS predvolene používa a “späť” tlačidlo doľava a často jeden “možnosti” alebo “config” napravo.

 
 nastavenie 
Tu je
 
 

Vyššie uvedený kód sa zameriava iba na kontajner div pre našu stránku Informácie spolu s obsahom hlavičky. Ďalší atribút HTML Data-add-back-btn = "true" bude fungovať iba pri pridaní do úlohy s údajmi o stránke. Účelom je automaticky zahrnúť tlačidlo späť, ktoré funguje podobne ako tlačidlo spätného prehliadača.

Mohli sme pridať tlačidlo späť ručne s podobným kódom, ako sme použili v oblasti obsahu. Mám však pocit, že to trvá oveľa dlhšie, hlavne na viacerých stránkach. Všetky ukotvenia v sekcii hlavičky budú predvolené do polôh vľavo / vpravo. Používaním class = "ui-btn-right" toto nastavenie znovu umiestnilo moje tlačidlo Nastavenia, takže je voľné miesto pre tlačidlo späť. Tiež používam sekundárne štýly, ktoré vám dávajú nejaké extra!

Navigácia päty

Päta oblasť veľa nie je na prvý pohľad veľmi užitočná. Je to miesto, kde môžete ukladať autorské práva a dôležitejšie odkazy, ale to by mohlo byť rovnako ľahko pridané v spodnej časti oblasti obsahu. Takže aký dobrý je použitie päty?

Takže ten najlepší príklad, aký som videl, využíva priestor na zápätie ako navigačný systém, v ktorom sa zdá, že odkazy na záložky riadia navigáciu na stránke. Existuje veľa možností, kde si môžete vybrať efekty na celú obrazovku, pridať ikony, upraviť umiestnenie a niekoľko ďalších atribútov rovnako. Ale stačí vytvoriť jednoduchý footer nav s 3 tlačidlami, aby ste získali predstavu o tom, ako to funguje.

• Ukážka živého ukážky

Takže tu je nejaký päty pre sekciu o stránke. Data-role = "Navbar" by mal byť pridaný na kontajnerový prvok, ktorý obsahuje neusporiadaný zoznam a nie samotný prvok UL. Každý odkaz v rámci zoznamu sa považuje za tabuľkový panel, ktorý sa potom rozdeľuje rovnako na základe celkového počtu odkazov. Dodatočná trieda ui-body-b jednoducho pridáva estetické efekty pri prepínaní medzi niekoľkými dostupnými štýlmi.

Ak si všimnete prvé tlačidlo, mám atribút dát smer = "reverzné". Aj keď by som mohol použiť nastavenie spätného tlačidla ako predtým, aby som sa vrátil na domovskú stránku, namiesto toho som použil ID stránky #index. V predvolenom nastavení sa okno aplikácie prechádza na pravej strane, čo vyzerá pekne, pretože očakávate, že sa animácia posunie späť. Môžete si zahrať ešte viac týchto animovaných efektov, ak máte čas. Pozrite si stránku informácií o prechode v dokumentácii jQuery.

Ajax a dynamické stránky

Prvý segment skutočne otvoril kľúčové body budovania mobilnej aplikácie s jQuery. Chcem však spustiť novú aplikáciu, ktorá načíta údaje z externej stránky. Budem používať veľmi jednoduchý PHP skript na dosiahnutie $ _REQUEST [] premennú a zobrazujú malý zásah Dribbble. Nasledujúca obrazovka by vám mala dať predstavu, čo budeme stavať.

Najprv nastavím index.html stránku na predvolenú šablónu. Na túto domovskú obrazovku používam nastavenie zobrazenia zoznamu na zobrazenie každého odkazu v poradí. Toto sa robí v oblasti s obsahom Data-role = "ListView" atribút na kontajneri zoznamu. Ak chcete vynechať rovnaké hlavičkové položky ako predtým, pridal som celý kód z tejto novej indexovej stránky nižšie.

 
 
 
Október 2011 Zábery
 
 
 
 
Prvý obrázok
 
Druhý obrázok
 
Tretí obrázok
 
Štvrtý obrázok
 
 
  
   

Každý z odkazov na ukotvenie v zozname môjho zoznamu ukazuje na ten istý súbor - index.php. Ale prenesieme tento parameter imgid ako požiadavka premennej. Na súbore image.php berieme ID a testujeme ho na 4 prednastavené hodnoty. Ak sa niektorý z nich zhoduje, použijeme zodpovedajúcu adresu URL a názov obrázka, inak sa zobrazí iba predvolená snímka Dribbble.

Snímok načítača obrázkov

Skript image.php má ešte stále predvolenú predvolenú jQuery mobilnú šablónu pridanú do kódu. V skutočnosti zdieľa veľmi podobné záhlavie a pätu, okrem pridania atribútu spätného odkazu Data-add-back-btn = "true". Všimnite si, že toto tlačidlo sa zobrazí iba vtedy, ak prichádzame z index.html! Pokúste sa priamo načítať image.php a nič sa nezobrazí, pretože tu nie je “späť” presunúť sa.

Myslím, že môžeme urobiť trochu väčší zmysel pre kód skúmaním mojej logiky PHP najprv. Používame a prepínač / púzdro metódu skontrolovať proti 4 rôznym identifikátorom a poskytnúť názov nadpisu, adresu URL obrázka a zdrojový odkaz pôvodného interpreta.

Všetko sa zdá byť dosť jednoduché - dokonca aj nováčik PHP dev by mal byť schopný sledovať! A ak nerozumiete, nie je to dôležité pre jQuery kód rovnako, takže sa nebojte. Mali by sme sa teraz zmeniť a pozrieť sa na šablónu, ktorú som vytvoril na tejto novej stránke. Celý kód HTML sa pridá po tom celom bloku PHP vyššie. Použil som ID čísla “snímky” pre kontajner a dokonca aj nastavenie záhlavia na zmenu s každou novou fotografiou.

 
 
 
 
 
 Zobraziť originál
 
 
  
 

Pravdepodobne môžete vidieť, ako zjednodušujúce je to demo. Celý účel však je preukázať škálovateľnosť mobilného zariadenia jQuery. PHP môže byť ľahko pridaný do mixu a môžete vyčarovať niektoré naozaj čisté aplikácie s niekoľkými pár hodín vývoja.

Fancy Design s miniatúrami zoznamu

Posledným dodatočným efektom, ktorý môžeme implementovať, je použitie miniatúr, aby oživili stránku so záznamom. Chystám sa tiež rozdeliť text do poľa s názvom a popisom, aby sa zobrazil aj názov umeleckého diela a meno interpreta.

Ak chcete začať otvárať program Photoshop a vytvoriť dokument s rozlíšením 80 × 80 pixelov. Chystám sa rýchlo zmeniť veľkosť každého obrázka a uložiť miniatúry tak, aby zodpovedali každému. Potom aktualizujeme položky zoznamu, mali by sme zahrnúť ešte niekoľko prvkov.

Pozrite si nižšie uvedený kód a môj demo príklad, aby ste videli, čo mám na mysli.

[Preview Live Demo]

 
 
  
Wunderkit úlohy
 
od Sebastiana Scheerera
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Aplikácia Fórum pre Facebook
 
od Ionut Zamfir
 
  
cvrlikání
 
od Sam Jones
 
 
 

Triedy pre ui-li-okruh a ui-li-desc sa predvolene pridajú do štýlu jQuery Mobile. Toto je podobné ako trieda obrázkov ui-li-palec ktorý automaticky prerozdeľuje každú zobrazovaciu lištu zoznamu podľa výšky obrazu. Teraz odtiaľto by ste mohli stavať viac na fronte pomocou animácií, efektov stránok, šablón štýlov atď.

Alebo by ste mohli začať s vytváraním backendového systému na načítanie nových obrázkov a automaticky orezávať miniatúry, ktoré sa majú zaradiť do zoznamu. V aplikácii jQuery Mobile máte takú flexibilitu, že ju takmer nemôžete označiť len ako knižnicu JavaScript. Je to viac ako celý rámec HTML5 / CSS / jQuery pre vytváranie rýchlych a škálovateľných mobilných aplikácií.

záver

Od písania tohto článku tím jQuery Mobile oficiálne vydal RC1.0 knižnice kódov. To znamená, že väčšina, ak nie všetky hlavné opravy chýb, boli stlačené a teraz testeri sa pripravujú na plné uvoľnenie. Z tohto dôvodu nenájdete veľa informácií na webe.

Ale ako mesiace pokroku webových vývojárov si určite vyzdvihnúť trend. Mobilné aplikácie a dokonca aj mobilné rozloženie webových stránok rastie v popularite s obrovským nárastom v smartphonoch. Weboví vývojári nemajú čas na to, aby sa naučili úplný programovací jazyk pre vytváranie aplikácií pre Android / iOS. Takže jQuery Mobile je štíhla alternatíva, ktorá zahŕňa podporu pre väčšinu softvéru pre mobilný priemysel a stále rastie každý deň s aktívnou komunitou vývojárov.