Vytvorte si mobilný web pomocou jQuery Mobile

Obsah

• Ako kódovať viac stránok v jednom súbore HTML
• Popis
• Ako používať dialógové okná a prechody
• Prechody, ktoré sa dajú použiť
• Popis
• Ako vytvárať tlačidlá
• Popis
• Ako vytvoriť navigačný panel
• Ako kódovať HTML pre navigačný panel:
• Ako formátovať obsah pomocou jQuery Mobile
• Predvolené štýly, ktoré používa jQuery Mobile
• Popis
• Ako aplikovať témy na prvky HTML
• Dva spôsoby použitia témy:
• Popis
• Perspektíva

Toto je upravený úryvok z 15. kapitoly z Murachove HTML5 a CSS3 predkladajú Zak Ruvalcaba a Anne Boehm.

jQuery Mobile je bezplatná open-source multiplatformová knižnica JavaScriptu, ktorú môžete použiť na vývoj mobilných webových stránok. Táto knižnica vám umožňuje vytvárať stránky, ktoré vyzerajú a vyzerajú ako stránky natívnej mobilnej aplikácie.

Aj keď je jQuery Mobile v súčasnosti k dispozícii ako beta testovacia verzia, táto verzia už poskytuje všetky funkcie, ktoré potrebujete pre vývoj vynikajúceho mobilného webu. Vďaka tomu ho môžete okamžite začať používať. Môžete tiež očakávať, že táto verzia bude neustále vylepšovaná, takže jQuery Mobile bude iba lepší.

V tomto článku sa dozviete základné techniky vytvárania stránok mobilného webu. To bude zahŕňať použitie dialógových okien, tlačidiel a navigačných panelov.

Ako kódovať viac stránok v jednom súbore HTML

Na rozdiel od spôsobu, akým vyvíjate webové stránky pre webové stránky s obrazovkou, vám jQuery Mobile umožňuje vytvárať viac stránok v jednom súbore HTML. Ilustruje to obrázok 15-7. Tu môžete vidieť dve stránky webu spolu s kódom HTML týchto stránok. Čo je prekvapujúce, je to, že obe stránky sú kódované v jednom súbore HTML.

Pre každú stránku kódujete jeden prvok div s hodnotou „page“ ako hodnotou atribútu data-role. Potom v rámci každého z týchto prvkov div kódujete prvky div pre hlavičku, obsah a pätu každej stránky. Neskôr, po načítaní súboru HTML, sa zobrazí prvá stránka v tele súboru.

Na prepojenie medzi stránkami v súbore HTML použijete zástupné symboly, ako je to znázornené na obrázku 7-11 v kapitole 7. Napríklad prvok a> na prvej stránke v tomto príklade prejde na „#toobin“, keď používateľ klepne na prvok h2 alebo img, ktorý je kódovaný ako obsah tohto odkazu. Toto označuje prvok div s atribútom „toobin“, čo znamená, že klepnutím na odkaz sa čitateľ presunie na druhú stránku v súbore.

Aj keď tento príklad zobrazuje iba dve stránky, v jednom súbore HTML môžete kódovať veľa stránok. Nezabudnite však, že všetky stránky spolu s ich obrázkami, súbormi JavaScript a CSS sú načítané do jedného súboru HTML. Výsledkom je nadmerná doba načítania, ak uložíte príliš veľa stránok do jedného súboru. Ak k tomu dôjde, môžete svoje stránky rozdeliť do viac ako jedného súboru HTML.

HTML pre dve stránky v tele jedného súboru HTML:

div data-role = "page"> header data-role = "header"> h1> Radnica SJV / h1> / header> oddiel data-role = "content"> h3> Rečníci 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. októbra 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - PRVKY ZO zvyšku rečníkov - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Radnica SJV / h1> / header> oddiel data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor kriticky uznávaného najlepšieho predajcu, i> The Nine:! - KÓPIA POKRAČUJE -> / oddiel> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Popis

• Ak používate jQuery Mobile, nemusíte pre každú stránku vyvíjať samostatný súbor HTML. Namiesto toho v rámci prvku tela jedného súboru HTML kódujete jeden prvok div pre každú stránku s atribútom dátovej role nastaveným na „stránka“.
• Pre každý prvok div nastavíte atribút id na zástupnú hodnotu, ku ktorej je možné získať prístup pomocou atribútov href v a> prvkoch iných stránok.

Ako používať dialógové okná a prechody

Obrázok 15-8 ukazuje, ako vytvoriť dialógové okno, ktoré sa otvorí po klepnutí na odkaz. Za týmto účelom napíšete dialógové okno rovnako, ako pri ktorejkoľvek inej stránke. Ale v elemente a>, ktorý ide na túto stránku, kódujete atribút data-rel s hodnotou „dialog“.

Ako ukazujú príklady na tomto obrázku, súbor jQuery Mobile CSS formátuje dialógové okno inak ako bežná webová stránka. V predvolenom nastavení bude mať dialógové okno tmavé pozadie s bielym textom v popredí a hlavička a päta nepresahujú šírku stránky. Dialógové okno bude mať v záhlaví tiež písmeno „X“, na ktoré musí používateľ klepnúť, aby sa vrátil na predchádzajúcu stránku.

Keď kódujete prvok a>, ktorý ide na inú stránku alebo dialógové okno, môžete tiež použiť atribút data-transition na zadanie jedného zo šiestich prechodov, ktoré sú zhrnuté v tabuľke na tomto obrázku. Každý z týchto prechodov má napodobňovať efekt, ktorý používa mobilné zariadenie ako iPhone.

Prechody, ktoré sa dajú použiť

HTML, ktorý otvára stránku ako dialógové okno s prechodom „pop“:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML, ktorý otvára stránku s prechodom „fade“:

a href = "# toobin" data-transition = "fade">

Popis

• Kód HTML pre a dialógové okno je kódované tak, ako je kódovaná akákoľvek stránka. Element a>, ktorý odkazuje na stránku, však obsahuje atribút data-rel s hodnotou „dialog“. Dialógové okno zatvoríte tak, že klepnete na X v záhlaví okna.
• Ak chcete určiť spôsob otvorenia stránky alebo dialógového okna, môžete použiť atribút prechodu údajov s jednou z hodnôt v tabuľke vyššie. Ak zariadenie nepodporuje vami zadaný prechod, atribút sa ignoruje.
• Styling pre dialógové okno sa vykonáva pomocou súboru CSV jQuery Mobile.

Ako vytvárať tlačidlá

Obrázok 15-9 zobrazuje spôsob používania tlačidiel na prechádzanie z jednej stránky na druhú. Ak to chcete urobiť, stačí nastaviť atribút dátovej role pre a> prvok na „tlačidlo“ a o ostatné sa postará jQuery Mobile.
Môžete však nastaviť aj niektoré ďalšie atribúty tlačidiel. Ak napríklad chcete, aby sa vedľa seba zobrazovali dve alebo viac tlačidiel, rovnako ako prvé dve tlačidlá na tomto obrázku, môžete nastaviť atribút data-inline na hodnotu „true“.

Ak chcete pridať jednu z 18 ikon, ktoré poskytuje jQuery Mobile, k tlačidlu, tiež kódujete atribút data-icon. Napríklad tretie tlačidlo v tomto príklade používa ikonu „vymazať“ a štvrté tlačidlo používa ikonu „domov“. Všetky tieto ikony vyzerajú ako ikony, ktoré sa môžu zobraziť v natívnej mobilnej aplikácii. Mimochodom, tieto ikony nie sú samostatnými súbormi, ku ktorým musí stránka získať prístup. Namiesto toho ich poskytuje knižnica jQuery Mobile.

Ak chcete horizontálne zoskupiť dve alebo viac tlačidiel, ako sú tlačidlá Áno, Nie a Možno na tomto obrázku, môžete kódovať prvky a> pre tlačidlá v rámci prvku div, ktorý má ako svoju atribút dátovej roly „controlgroup“ a „Horizontálne“ ako atribút dátového typu. Prípadne ak chcete zoskupiť tlačidlá zvisle, môžete zmeniť atribút dátového typu na „zvislý“.

Ak nastavíte atribút data-rel pre tlačidlo na „späť“ a atribút href na symbol libry (#), tlačidlo sa vráti na stránku, ktorá ho volala. Inými slovami, tlačidlo funguje ako tlačidlo Späť. Ilustruje to posledné tlačidlo v obsahu stránky.

Posledné dve tlačidlá ukazujú, ako sa tlačidlá zobrazujú v päte stránky. Tu sú ikony a text biele na čiernom pozadí. V takom prípade je atribút triedy pre pätu nastavený na „ui-bar“, ktorý informuje jQuery Mobile, že by mal okolo päty umiestniť trochu viac miesta. Viac sa o tom dozviete na obrázku 15-12.

HTML pre tlačidlá v sekcii:

! - Pre vložené tlačidlá nastavte atribút data-line na true -> a href = "#" data-role = "button" data-inline = "true"> Zrušiť / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Ak chcete k tlačidlu pridať ikonu, použite atribút data-icon -> tlačidlo href = "#" data-role = " "data-icon =" delete "> Odstrániť / a> a href =" # "data-role =" button "data-icon =" home "> Domov / a>! - Ak chcete zoskupiť tlačidlá, použite prvok div s nasledujúce atribúty -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Áno / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Nie / a> a href = "#" data-role = "tlačidlo"> Možno / a> / div>! - To kódovať tlačidlo Späť, nastaviť atribút data-rel na späť -> a href = "#" data-role = "button" dat-rel = "späť" data-icon = "späť"> Späť na predchádzajúcu stránku / a >

HTML pre tlačidlá v päte:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Pridať na Facebook / a> a href = "http:" //www.twitter.com "data-role =" button "data-icon =" plus "> pípanie tejto stránky / /> / päta>

Popis

• Ak chcete pridať tlačidlo na webovú stránku, kódujete element a> s atribútom dátovej role nastaveným na „button“.

Ako vytvoriť navigačný panel

Obrázok 15-10 ukazuje, ako môžete pridať navigačnú lištu na webovú stránku. Za týmto účelom kódujete prvok div s dátovou rolou nastavenou na „navbar“. V rámci tohto prvku kódujete ul prvok, ktorý obsahuje prvky li, ktoré obsahujú prvky a> pre položky v navigačnom paneli. Upozorňujeme však, že atribút dátovej role nekódujete pre prvky a>.

Ak chcete zmeniť farbu položiek v navigačnom paneli, obsahuje kód v tomto príklade atribút data-theme-b pre každú položku. Výsledkom je, že jQuery Mobile zmení farbu pozadia každej položky z čiernej, ktorá je predvolená, na atraktívnu modrú. Tento kód navyše nastavuje atribút triedy pre aktívne tlačidlo na „ui-btn-active“, takže jQuery Mobile zmení farbu aktívneho tlačidla na svetlejšiu modrú. To ukazuje, ako môžete zmeniť formátovanie, ktoré používa jQuery Mobile, a o tom sa dozviete ďalšie.

HTML pre navigačný panel:

header data-role = "header"> h1> Radnica SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Domovská stránka / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" b "> Speakers / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontaktujte nás / a> / li> / ul> / div> / header>

Ako kódovať HTML pre navigačný panel:

• Kódujte prvok div v rámci prvku hlavičky. Potom nastavte atribút dátovej role pre prvok div na „navbar“.
• V prvku div kódujte prvok ul, ktorý obsahuje jeden prvok li pre každý odkaz.
• V rámci každého prvku li kódujte prvok a> pomocou atribútu href, ktorý používa zástupný znak pre stránku, na ktorú by odkaz mal smerovať. Potom nastavte atribút data-icon na ikonu podľa vášho výberu.
• Pre aktívnu položku na navigačnom paneli nastavte atribút triedy na „ui-btn-active“.Potom bude farba tejto položky svetlejšia ako u ostatných položiek na navigačnej lište.
• Atribút data-theme by ste mali použiť aj na použitie témy jQuery Mobile na každú položku na navigačnom paneli. V opačnom prípade budú mať tlačidlá na paneli rovnakú farbu ako zvyšok hlavičky. Ak sa chcete dozvedieť viac o aplikovaní tém, pozrite si obrázok 15-12.

Ako formátovať obsah pomocou jQuery Mobile

Ako ste už videli, jQuery Mobile automaticky formátuje komponenty webovej stránky na základe vlastnej šablóny štýlov. Teraz sa dozviete viac o tom, ako aj o tom, ako upraviť predvolený štýl, ktorý jQuery Mobile používa.

Predvolené štýly, ktoré používa jQuery Mobile

Obrázok 15-13 zobrazuje predvolené štýly, ktoré jQuery Mobile používa pre bežné prvky HTML. Pri všetkých svojich štýloch sa jQuery Mobile spolieha na vykresľovací modul prehľadávača, takže jeho vlastný štýl je minimálny. Toto udržuje časy načítania rýchle a minimalizuje réžiu, ktorú by nadmerné CSS uvalilo na stránku.

Ako môžete vidieť, štýl jQuery Mobile je taký efektívny, že nemusíte meniť jeho štýl poskytnutím vlastnej šablóny štýlov CSS. Napríklad medzery medzi položkami v neusporiadanom zozname a formátovaním tabuľky sú prijateľné tak, ako sú. Čierny typ na sivom pozadí je tiež v súlade s formátovaním pre natívne mobilné aplikácie.

Popis

• V predvolenom nastavení jQuery Mobile automaticky aplikuje štýly na prvky HTML pre stránku. Tieto štýly sú nielen atraktívne, ale aj napodobňujú natívne štýly prehľadávača.
• V predvolenom nastavení aplikácia jQuery Mobile aplikuje malé množstvo výplne na ľavú, pravú, hornú a dolnú časť každej mobilnej stránky.
• V predvolenom nastavení sú odkazy o niečo väčšie ako bežný text. To uľahčuje používateľovi klepanie na odkazy.
• V predvolenom nastavení sú odkazy podčiarknuté modrou farbou písma.

Ako aplikovať témy na prvky HTML

V niektorých prípadoch budete chcieť zmeniť predvolené štýly, ktoré jQuery Mobile používa. To ste už videli na navigačnej lište na obrázku 15-10. Ak chcete zmeniť predvolené štýly, môžete použiť päť tém, ktoré poskytuje jQuery Mobile. Sú zhrnuté na obrázku 15-12. Aj tu sú tieto témy určené na napodobnenie vzhľadu natívnej mobilnej aplikácie.

Jedným zo spôsobov použitia tém je kódovanie atribútu data-theme s písmenom témy ako hodnotou. Videli ste to na navigačnej lište na obrázkoch 15–10 a môžete to vidieť v kóde pre druhú navigačnú lištu na tomto obrázku. Atribút data-theme tu aplikuje tému „e“ na hlavičku a tému „d“ na položky v navigačnej lište.

Ďalším spôsobom, ako použiť témy, je nastaviť atribút triedy pre prvok na názov triedy, ktorý označuje tému. To ilustruje prvý príklad za tabuľkou. Tu sa atribút triedy používa na použitie tried „ui-bar“ aj „ui-bar-b“ na prvok div. Výsledkom je, že jQuery Mobile najskôr použije svoj predvolený štýl pre lištu na prvok a potom na tento štýl použije tému b. Na nasledujúcich stránkach uvidíte ďalšie príklady tohto typu tvarovania.

Upozorňujeme, že tabuľka na tomto obrázku hovorí o šetrnom používaní témy e. Je to preto, lebo používa oranžovú farbu, ktorá funguje dobre na zvýraznenie položky, ale nie je atraktívna vo veľkých dávkach. To ilustruje druhá hlavička a navigačný panel na tomto obrázku, ktoré majú tendenciu byť nepríjemné, keď ich vidíte farebne.

Všeobecne je najlepšie zostať pri predvolených štýloch a prvých troch témach, ktoré zvyčajne dobre spolupracujú. Potom môžete experimentovať s témami da e, keď si myslíte, že potrebujete niečo viac.

HTML pre druhú hlavičku a navigačný panel:

header data-role = "header" data-theme = "e"> h1> Radnica SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Domovská stránka / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" d "> Reproduktory / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

Päť tém jQuery Mobile:

Dva spôsoby použitia témy:

Pomocou atribútu data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> Domov / a> / li>

Použitím atribútu triedy, ktorý označuje tému:

div> Bar / div>

Popis

• Použitím piatich tém, ktoré sú súčasťou jQuery Mobile, môžete vykonať príslušné úpravy predvolených štýlov pre prvky HTML.
• Aj keď môžete použiť vlastnú šablónu štýlov CSS s aplikáciou jQuery Mobile, nemali by ste sa tomu vyhýbať, kedykoľvek je to možné.

Perspektíva

Používanie mobilných zariadení sa za posledných pár rokov dramaticky zvýšilo. Z tohto dôvodu je čoraz dôležitejšie navrhovať webové stránky, ktoré sa z týchto zariadení ľahko používajú. Aj keď to zvyčajne znamená vytvoriť samostatnú webovú stránku, môže to byť kritický aspekt udržania vašej prítomnosti na internete.

Našťastie sa úloha vytvorenia mobilnej webovej stránky s príchodom jQuery Mobile stala oveľa ľahšou. Mobilné webové stránky už nie sú obmedzené na statické stránky, ktoré obsahujú nadpisy, odseky, odkazy a miniatúry. Vďaka jQuery Mobile môžu teraz weboví vývojári vytvárať webové stránky s bohatými funkciami, ktoré vyzerajú a pôsobia ako natívne mobilné aplikácie.