Hozzon létre egy mobil weboldalt a jQuery Mobile alkalmazással

Tartalom

• Több oldal kódolása egyetlen HTML fájlban
• Leírás
• A párbeszédpanelek és átmenetek használata
• A használható átmenetek
• Leírás
• Hogyan hozzunk létre gombokat
• Leírás
• Hogyan készítsünk navigációs sávot
• A HTML kódolása a navigációs sávhoz:
• A tartalom formázása a jQuery Mobile alkalmazással
• Az alapértelmezett stílusok, amelyeket a jQuery Mobile használ
• Leírás
• Hogyan lehet témákat alkalmazni a HTML elemekre
• A téma alkalmazásának két módja:
• Leírás
• Perspektíva

Ez egy szerkesztett részlet a Murach HTML5 és CSS3 Zak Ruvalcaba és Anne Boehm.

A jQuery Mobile egy ingyenes, nyílt forráskódú, platformokon átívelő, JavaScript könyvtár, amelyet mobil webhelyek fejlesztésére használhat. Ez a könyvtár lehetővé teszi olyan oldalak létrehozását, amelyek úgy néznek ki és olyanok, mint egy natív mobilalkalmazás oldalai.

Bár a jQuery Mobile jelenleg bétateszt-verzióként érhető el, ez a verzió már biztosítja mindazokat a funkciókat, amelyekre szüksége van egy kiváló mobil weboldal fejlesztéséhez. Ennek eredményeként azonnal elkezdheti használni. Arra is számíthat, hogy ezt a verziót folyamatosan fejlesztik, így a jQuery Mobile csak jobb lesz.

Ebben a cikkben megismerheti a mobilwebhely oldalainak létrehozásának alapvető technikáit. Ez magában foglalja a párbeszédpanelek, gombok és navigációs sávok használatát.

Több oldal kódolása egyetlen HTML fájlban

Ellentétben azzal, ahogyan a weboldalakat egy képernyős webhelyhez készíti, a jQuery Mobile lehetővé teszi több oldal létrehozását egyetlen HTML fájlban. Ezt a 15-7. Ábra szemlélteti. Itt egy webhely két oldalát láthatja, valamint az ezekhez az oldalakhoz tartozó HTML-t. Ami meglepő, hogy mindkét oldal egyetlen HTML fájlban van kódolva.

Minden oldalhoz egy div elemet kódol, az „oldal” értékkel az adatszerep attribútum értékeként. Ezután ezen div elemek mindegyikén belül kódolja a div elemeket az egyes oldalak fejlécéhez, tartalmához és láblécéhez. Később, amikor a HTML fájl betöltődik, megjelenik a fájl törzsében az első oldal.

A HTML fájlban található oldalak közötti összekapcsoláshoz helyőrzőket kell használni, amint az a 7. fejezet 7-11. Ábráján látható. Például a példa első oldalán található a> elem a „#toobin” elemre megy, amikor a felhasználó megérinti a h2 vagy img elem, amely ennek a linknek a tartalmaként van kódolva. Ez a div elemre utal, amelynek id attribútuma a „toobin”, ami azt jelenti, hogy a link megérintésével az olvasó a fájl második oldalára kerül.

Bár ez a példa csak két oldalt mutat, egyetlen HTML fájlban sok oldalt kódolhat. Ne feledje azonban, hogy az összes oldal, a képekkel, a JavaScript-sel és a CSS-fájlokkal együtt egyetlen HTML-fájl van betöltve. Ennek eredményeként a betöltési idő túlzóvá válik, ha túl sok oldalt tárol egyetlen fájlban. Amikor ez megtörténik, több HTML-fájlra oszthatja az oldalait.

Egy HTML fájl törzsében található két oldal HTML-je:

div data-role = "page"> header data-role = "header"> h1> SJV Városháza / h1> / header> szakasz data-role = "content"> h3> A 2011-2012-es hangszórók / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 2011. október 19. / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - A HANGSZÓRÓK MÁSIK ELEMEI - -> / section> lábléc data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV városháza / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Fekete köpenyes titkok / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> A kritika által elismert bestseller szerzője, i> The Nine:! - A MÁSOLAT FOLYTATIK -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Leírás

• A jQuery Mobile használatakor nem kell külön HTML-fájlt fejlesztenie az egyes oldalakhoz. Ehelyett egyetlen HTML fájl törzs elemén belül minden oldalhoz egy div elemet kódol, amelynek adat-szerep attribútuma „oldal”.
• Minden div elemnél az id attribútumot olyan helyőrző értékre állítja be, amelyet a href attribútumok elérhetnek más oldalak a> elemeiben.

A párbeszédpanelek és átmenetek használata

A 15-8. Ábra bemutatja, hogyan lehet létrehozni egy párbeszédpanelt, amely megnyílik egy hivatkozás megérintésekor. Ehhez ugyanúgy kódolja a párbeszédpanelt, mint bármelyik oldalt. De az az oldalra kerülő a> elemben egy data-rel attribútumot kódol, amelynek értéke a „dialog”.

Amint az ábra példái mutatják, a jQuery Mobile CSS fájl másként formázza a párbeszédpanelt, mint egy normál weboldal. Alapértelmezés szerint egy párbeszédpanel sötét háttérrel rendelkezik, fehér előtér szöveggel, a fejléc és a lábléc pedig nem terjed ki az oldal szélességére. A párbeszédpanel egy „X” betűvel is rendelkezik a fejlécben, amelyet a felhasználónak megérintve visszatérhet az előző oldalra.

Ha egy> elemet kódol, amely egy másik oldalra vagy párbeszédpanelre kerül, akkor az data-transfer attribútummal megadhatja az ábra hat táblázatában összefoglalt hat átmenet egyikét is. Ezen átmenetek mindegyike azt a hatást kívánja utánozni, amelyet egy mobil eszköz, például egy iPhone, használ.

A használható átmenetek

HTML, amely párbeszédpanelként nyitja meg az oldalt „pop” átmenettel:

a href = "# toobin" data-rel = "párbeszédpanel" data-transit = "pop">

HTML, amely „elhalványult” átmenettel nyitja meg az oldalt:

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

Leírás

• A HTML a párbeszédablak kódolva van úgy, ahogy bármely oldal kódolva van. Az oldalra mutató a> elem azonban tartalmazza az data-rel attribútumot, amelynek értéke a „dialog”. A párbeszédpanel bezárásához a felhasználó megérinti az X-et a mező fejlécében.
• Az oldal vagy egy párbeszédpanel megnyitásának módjának megadásához használhatja az data-transfer attribútumot a fenti táblázat egyik értékével. Ha egy eszköz nem támogatja az Ön által megadott átállást, akkor az attribútumot figyelmen kívül hagyja.
• A párbeszédpanel stílusát a jQuery Mobile CSS fájl végzi.

Hogyan hozzunk létre gombokat

A 15-9. Ábra bemutatja, hogyan lehet a gombokkal navigálni egyik oldalról a másikra. Ehhez csak egy gomb elemre kell állítania az adat-szerep attribútumot egy „gomb” értékre, a többit pedig a jQuery Mobile végzi.
Ugyanakkor beállíthat néhány egyéb tulajdonságot is a gombokhoz. Ha például két vagy több gombot szeretne megjeleníteni egymás mellett, mint az ábra első két gombja, akkor az data-inline attribútumot igazra állíthatja.

Ha egy gombhoz hozzá szeretné adni a jQuery Mobile által biztosított 18 ikon egyikét, akkor kódolja az data-icon attribútumot is. Például ebben a példában a harmadik gomb a „törlés” ikont használja, a negyedik gomb pedig a „home” ikont. Ezek az ikonok úgy néznek ki, mint egy natív mobilalkalmazásban. Ezek az ikonok nem külön fájlok, amelyekhez az oldalnak hozzáférnie kell. Ehelyett a jQuery Mobile könyvtár biztosítja őket.

Ha két vagy több gombot vízszintesen akar csoportosítani, mint például az Igen, Nem és Talán gombokat, akkor kódolhatja a gombok a> elemeit egy div elemen belül, amelynek „szerepkör” attribútuma a „controlgroup” és „Horizontális” mint adattípus-attribútum. Vagy a gombok függőleges csoportosításához megváltoztathatja az adattípus attribútumát „függőleges” értékre.

Ha egy gombhoz a data-rel attribútumot „back” -re, a href attribútumot pedig a font szimbólumra (#) állítja be, a gomb visszatér arra az oldalra, amelyik hívta. Más szavakkal, a gomb úgy működik, mint egy Vissza gomb. Ezt illusztrálja az oldal tartalmának utolsó gombja.

Az utolsó két gomb megmutatja, hogyan jelennek meg a gombok az oldal láblécében. Itt az ikonok és a szöveg fekete háttéren fehér. Ebben az esetben a lábléc class attribútuma „ui-bar” -ra van állítva, ami azt mondja a jQuery Mobile-nak, hogy egy kicsit több helyet kellene foglalnia a lábléc tartalma körül. Erről többet megtudhat a 15-12. Ábrán.

A szakasz gombjainak HTML-je:

! - Inline gomboknál állítsa az data-line attribútumot true értékre -> a href = "#" data-role = "button" data-inline = "true"> Mégse / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Ikon hozzáadásához egy gombhoz használja az data-icon attribútumot -> a href = "#" data-role = "gombot "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - A gombok csoportosításához használjon div elemet a a következő attribútumok -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Yes / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Talán / a> / div>! - Címzett kódoljon egy Vissza gombot, állítsa vissza az data-rel attribútumot vissza -> a href = "#" data-role = "gomb" dat-rel = "vissza" data-icon = "vissza"> Vissza az előző oldalra / a >

A lábléc gombjainak HTML-je:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Hozzáadás a Facebook-hoz / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet this page / a> / footer>

Leírás

• Gomb hozzáadásához egy weboldalhoz kódoljon egy> elemet, amelynek adat-szerep attribútumának értéke „gomb”.

Hogyan készítsünk navigációs sávot

A 15-10. Ábra bemutatja, hogyan adhat hozzá navigációs sávot egy weboldalhoz. Ehhez kódolnia kell egy div elemet, amelynek adatszerepe „navbar” -ra van állítva. Ezen az elemen belül kódol egy ul elemet, amely olyan li elemeket tartalmaz, amelyek tartalmazzák a navigációs sáv elemeinek a> elemeit. Ne feledje azonban, hogy nem kódolja a data-role attribútumot az a> elemekhez.

A navigációs sávban található elemek színének megváltoztatásához az ebben a példában szereplő kód tartalmazza az egyes elemek data-theme-b attribútumát. Ennek eredményeként a jQuery Mobile megváltoztatja az egyes elemek háttérszínét az alapértelmezett feketéről vonzó kékre. Ezenkívül ez a kód az aktív gomb class attribútumát „ui-btn-active” értékre állítja, így a jQuery Mobile világosabb kékre változtatja az aktív gomb színét. Ez megmutatja, hogyan változtathatja meg a jQuery Mobile által használt formázást, és erről a következő lépésben többet tud meg.

A navigációs sáv HTML-je:

header data-role = "header"> h1> SJV Városháza / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Főoldal / a> / li> li> a href =" # hangszórók "data-icon =" star "data-theme =" b "> Hangszórók / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Lépjen kapcsolatba velünk / a> / li> / ul> / div> / header>

A HTML kódolása a navigációs sávhoz:

• Kódoljon egy div elemet a fejléc elemen belül. Ezután állítsa a div elem data-role attribútumát „navbar” értékre.
• A div elemen belül kódoljon egy ul elemet, amely minden egyes linkhez egy li elemet tartalmaz.
• Minden li elemen belül kódoljon egy a> elemet egy href attribútummal, amely helyőrzőt használ az oldalhoz, amelyre a linknek el kell jutnia. Ezután állítsa az data-icon attribútumot az Ön által választott ikonra.
• A navigációs sáv aktív eleméhez állítsa az class attribútumot „ui-btn-active” értékre.Ezután ennek az elemnek a színe világosabb lesz, mint a navigációs sáv többi eleme.
• Használja az data-theme attribútumot egy jQuery Mobile téma alkalmazásához a navigációs sáv minden eleméhez. Ellenkező esetben a sáv gombjai azonos színűek lesznek, mint a fejléc többi része. A témák alkalmazásával kapcsolatos további információkért lásd a 15-12. Ábrát.

A tartalom formázása a jQuery Mobile alkalmazással

Amint már látta, a jQuery Mobile automatikusan formázza a weboldal összetevőit a saját stíluslapja alapján. Most többet megtudhat erről, valamint arról, hogyan állíthatja be a jQuery Mobile alapértelmezett stílusát.

Az alapértelmezett stílusok, amelyeket a jQuery Mobile használ

A 15-13. Ábra azokat az alapértelmezett stílusokat mutatja, amelyeket a jQuery Mobile használ a közös HTML elemek számára. A jQuery Mobile minden stílusa a böngésző renderelő motorjára támaszkodik, így saját stílusa minimális. Ez gyors betöltési időt biztosít és minimalizálja a túlzott CSS által az oldalra nehezedő általános költségeket.

Amint láthatja, a jQuery Mobile stílusa annyira hatékony, hogy nem kell módosítania a stílusát saját CSS-stíluslap elkészítésével. Például a rendezetlen lista tételei közötti távolság és a táblázat formázása egyaránt elfogadható. Ezenkívül a szürke háttéren található fekete típus összhangban van a natív mobilalkalmazások formázásával.

Leírás

• Alapértelmezés szerint a jQuery Mobile stílusokat alkalmaz az oldal HTML-elemeire. Ezek a stílusok nemcsak vonzóak, hanem utánozzák a böngésző natív stílusait is.
• Alapértelmezés szerint a jQuery Mobile kis mennyiségű kitöltést alkalmaz minden mobil oldal bal, jobb, felső és alsó részén.
• Alapértelmezés szerint a hivatkozások valamivel nagyobbak, mint a normál szöveg. Ez megkönnyíti a felhasználó számára a linkek megérintését.
• Alapértelmezés szerint a hivatkozások betűszínként kék színnel vannak aláhúzva.

Hogyan lehet témákat alkalmazni a HTML elemekre

Bizonyos esetekben meg kell változtatni az alapértelmezett stílusokat, amelyeket a jQuery Mobile használ. Ezt már láthatta a 15-10. Ábra navigációs sávjában. Az alapértelmezett stílusok megváltoztatásához használhatja a jQuery Mobile által biztosított öt témát. Ezeket a 15-12. Ábra foglalja össze. Ismételten ezek a témák egy natív mobil alkalmazás megjelenését hivatottak utánozni.

A témák alkalmazásának egyik módja az adat-téma attribútum kódolása, amelynek értéke a téma betű. Ezt látta a navigációs sávon a 15-10. Ábrán, és ezt láthatja az ábra második navigációs sávjának kódjában. Itt az data-theme attribútum az „e” témát alkalmazza a fejlécre, a „d” témát pedig a navigációs sáv elemeire.

A témák alkalmazásának másik módja az, hogy egy elem osztályattribútumát olyan osztálynévre állítják be, amely témát jelöl. Ezt szemlélteti a táblázat utáni első példa. Itt az class attribútummal mind az „ui-bar”, mind az „ui-bar-b” osztályokat alkalmazni lehet a div elemre. Ennek eredményeként a jQuery Mobile először a sáv alapértelmezett stílusát alkalmazza az elemre, majd a b témát arra a stílusra. A következő oldalakon más példákat is láthat az ilyen stílusra.

Felhívjuk figyelmét, hogy az ábra táblázata azt mondja, hogy az e témát kíméletesen használja. Ez azért van, mert narancssárga színt használ, amely rendben működik az árucikkek hangsúlyozásához, de nagy adagokban nem vonzó. Ezt szemlélteti az ábra második fejléce és navigációs sávja, amely hajlamos elrontani, ha színesen látja.

Általában a legjobb az alapértelmezett stílusoknál és az első három témánál maradni, amelyek általában jól működnek. Ezután kísérletezhet a d és e témákkal, ha úgy gondolja, hogy valami továbbira van szüksége.

A második fejléc és a navigációs sáv HTML-je:

header data-role = "header" data-theme = "e"> h1> SJV Városháza / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Főoldal / a> / li> li> a href =" # hangszórók "data-icon =" star "data-theme =" d "> Hangszórók / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Hírek / a> / li> / ul> / div> / header>

Az öt jQuery Mobile téma:

A téma alkalmazásának két módja:

Data-theme attribútum használatával:

li> a href = "# home" data-icon = "home" data-theme = "b"> Főoldal / a> / li>

A témát jelző osztályattribútum használatával:

div> Bár / div>

Leírás

• A jQuery Mobile-hoz mellékelt öt téma használatával megfelelő beállításokat végezhet a HTML-elemek alapértelmezett stílusaiban.
• Bár használhatja saját CSS stíluslapját a jQuery Mobile alkalmazással, ezt lehetőség szerint kerülje.

Perspektíva

A mobil eszközök használata drámaian megnőtt az elmúlt években. Emiatt egyre fontosabbá vált olyan weboldalak megtervezése, amelyek könnyen kezelhetők ezekről az eszközökről. Bár ez általában egy külön weboldal fejlesztését jelenti, ez kritikus szempont lehet az interneten való jelenlét fenntartása szempontjából.

A jQuery Mobile megjelenésével szerencsére sokkal könnyebbé vált a mobil weboldal létrehozásának feladata. A mobil weblapok már nem korlátozódnak statikus oldalakra, amelyek címsorokat, bekezdéseket, linkeket és indexképeket tartalmaznak. A jQuery Mobile segítségével a webfejlesztők immár funkciókban gazdag webhelyeket készíthetnek, amelyek natív mobilalkalmazásnak tűnnek.