Creeu un lloc web per a mòbils amb jQuery Mobile

Content

• Com codificar diverses pàgines en un sol fitxer HTML
• Descripció
• Com s'utilitzen els quadres de diàleg i les transicions
• Les transicions que es poden utilitzar
• Descripció
• Com crear botons
• Descripció
• Com es crea una barra de navegació
• Com es codifica l'HTML d'una barra de navegació:
• Com formatar contingut amb jQuery Mobile
• Els estils predeterminats que utilitza jQuery Mobile
• Descripció
• Com aplicar temes a elements HTML
• Dues maneres d'aplicar un tema:
• Descripció
• Perspectiva

Aquest és un fragment editat del capítol 15 de HTML5 i CSS3 de Murach per Zak Ruvalcaba i Anne Boehm.

jQuery Mobile és una biblioteca JavaScript gratuïta, de codi obert, multiplataforma, que podeu utilitzar per desenvolupar llocs web per a mòbils. Aquesta biblioteca us permet crear pàgines que semblen les pàgines d'una aplicació mòbil nativa.

Tot i que actualment jQuery Mobile està disponible com a versió de prova beta, aquesta versió ja proporciona totes les funcions que necessiteu per desenvolupar un lloc web mòbil excel·lent. Com a resultat, podeu començar a utilitzar-lo de seguida. També podeu esperar que aquesta versió millori contínuament, de manera que jQuery Mobile només millorarà.

En aquest article aprendreu les tècniques bàsiques per crear les pàgines d’un lloc web per a mòbils. Això inclourà l'ús de quadres de diàleg, botons i barres de navegació.

Com codificar diverses pàgines en un sol fitxer HTML

A diferència de la manera com desenvolupeu les pàgines web per a un lloc web amb pantalla, jQuery Mobile us permet crear diverses pàgines en un sol fitxer HTML. Ho il·lustra la figura 15-7. Aquí podeu veure dues pàgines d’un lloc junt amb l’HTML d’aquestes pàgines. El que sorprèn és que ambdues pàgines estiguin codificades en un sol fitxer HTML.

Per a cada pàgina, codifiqueu un element div amb "pàgina" com a valor de l'atribut data-role. A continuació, dins de cadascun d’aquests elements div, codifiqueu els elements div per a la capçalera, el contingut i el peu de pàgina de cada pàgina. Més tard, quan es carrega el fitxer HTML, es mostra la primera pàgina del cos del fitxer.

Per enllaçar entre les pàgines del fitxer HTML, utilitzeu espais reservats com es mostra a la figura 7-11 del capítol 7. Per exemple, l'element a> de la primera pàgina d'aquest exemple va a "#toobin" quan l'usuari toca el botó element h2 o img que es codifica com a contingut d’aquest enllaç. Això es refereix a l'element div amb "toobin" com a atribut id, el que significa que si toqueu l'enllaç el lector passarà a la segona pàgina del fitxer.

Tot i que aquest exemple només mostra dues pàgines, podeu codificar moltes pàgines dins d’un sol fitxer HTML. Recordeu, però, que totes les pàgines juntament amb les seves imatges, JavaScript i fitxers CSS es carreguen amb un únic fitxer HTML. Com a resultat, el temps de càrrega esdevindrà excessiu si emmagatzemeu massa pàgines en un sol fitxer. Quan això passi, podeu dividir les vostres pàgines en més d'un fitxer HTML.

L'HTML de les dues pàgines del cos d'un fitxer HTML:

div data-role = "page"> header data-role = "header"> h1> Ajuntament de SJV / h1> / header> section data-role = "content"> h3> Els altaveus 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 d'octubre de 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELS ELEMENTS PER A LA RESTA DELS ALTAVOCES - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Ajuntament de SJV / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor del best seller més aclamat per la crítica, i> The Nine:! - THE COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Descripció

• Quan utilitzeu jQuery Mobile, no haureu de desenvolupar un fitxer HTML separat per a cada pàgina. En lloc d'això, dins de l'element cos d'un sol fitxer HTML, codifiqueu un element div per a cada pàgina amb l'atribut data-role definit a "pàgina".
• Per a cada element div, definiu l'atribut id a un valor de marcador de posició al qual poden accedir els atributs href en els elements a> d'altres pàgines.

Com s'utilitzen els quadres de diàleg i les transicions

La Figura 15-8 mostra com crear un quadre de diàleg que s'obre quan es prem un enllaç. Per fer-ho, codifiqueu el quadre de diàleg tal com ho faríeu amb qualsevol pàgina. Però a l'element a> que va a aquesta pàgina, codifiqueu un atribut data-rel amb el valor "diàleg".

Com mostren els exemples d’aquesta figura, el fitxer CSS jQuery Mobile dóna format a un quadre de diàleg diferent d’una pàgina web normal. Per defecte, un quadre de diàleg tindrà un fons fosc amb text en primer pla blanc i la capçalera i el peu de pàgina no abastaran l’amplada de la pàgina. Un quadre de diàleg també tindrà una "X" a la capçalera que l'usuari ha de tocar per tornar a la pàgina anterior.

Quan codifiqueu un element a> que vagi a una altra pàgina o quadre de diàleg, també podeu utilitzar l'atribut de transició de dades per especificar una de les sis transicions que es resumeixen a la taula d'aquesta figura. Cadascuna d’aquestes transicions pretén imitar un efecte que fa servir un dispositiu mòbil com un iPhone.

Les transicions que es poden utilitzar

HTML que obre la pàgina com a quadre de diàleg amb la transició "emergent":

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

HTML que obre la pàgina amb la transició "fade":

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

Descripció

• L'HTML d'un fitxer Caixa de diàleg es codifica de la mateixa manera que es codifica qualsevol pàgina. Tanmateix, l'element a> que enllaça a la pàgina inclou l'atribut data-rel amb "diàleg" com a valor. Per tancar el quadre de diàleg, l'usuari toca la X a la capçalera del quadre.
• Per especificar com s'obre una pàgina o un quadre de diàleg, podeu utilitzar l'atribut de transició de dades amb un dels valors de la taula anterior. Si un dispositiu no admet la transició que especifiqueu, l'atribut s'ignora.
• L'estil d'un quadre de diàleg es realitza mitjançant el fitxer CSS jQuery Mobile.

Com crear botons

La Figura 15-9 mostra com utilitzar els botons per navegar d'una pàgina a una altra. Per fer-ho, només heu d’establir l’atribut data-role per a un element a> "button" i jQuery Mobile fa la resta.
Tanmateix, també podeu establir altres atributs per als botons. Si, per exemple, voleu que apareguin dos o més botons un al costat de l’altre, com els dos primers botons d’aquesta figura, podeu establir l’atribut data-inline a “true”.

Si voleu afegir una de les 18 icones que proporciona jQuery Mobile a un botó, també codifiqueu l'atribut data-icon. Per exemple, el tercer botó d’aquest exemple fa servir la icona “suprimeix” i el quart botó fa servir la icona “inici”. Totes aquestes icones semblen les icones que podeu veure en una aplicació mòbil nativa. Per cert, aquestes icones no són fitxers independents als quals ha d’accedir la pàgina. En lloc d’això, els proporciona la biblioteca jQuery Mobile.

Si voleu agrupar dos o més botons horitzontalment, com ara els botons Sí, No i Potser d’aquesta figura, podeu codificar els elements a> dels botons d’un element div que tingui “controlgroup” com a atribut de rol de dades i "Horitzontal" com a atribut de tipus de dades. O bé, per agrupar els botons verticalment, podeu canviar l'atribut de tipus de dades a "vertical".

Si configureu l'atribut data-rel per a un botó com a "enrere" i l'atribut href al símbol de lliura (#), el botó tornarà a la pàgina que el va anomenar. En altres paraules, el botó funciona com un botó Enrere. Ho il·lustra l’últim botó del contingut de la pàgina.

Els dos darrers botons mostren com apareixen els botons al peu d'una pàgina. Aquí, les icones i el text són blancs sobre un fons negre. En aquest cas, l'atribut class del peu de pàgina es defineix com a "ui-bar", que indica a jQuery Mobile que hauria de posar una mica més d'espai al voltant del contingut del peu de pàgina. Aprendreu més informació a la figura 15-12.

L'HTML dels botons de la secció:

! - Per als botons en línia, configureu l'atribut de línia de dades a true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> D'acord / a>! - Per afegir una icona a un botó, utilitzeu l'atribut data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Inici / a>! - Per agrupar botons, utilitzeu un element div amb els atributs que segueixen -> 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"> Potser / a> / div>! - To codifiqueu un botó Enrere, configureu l'atribut data-rel a enrere -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Torna a la pàgina anterior / a >

L'HTML dels botons del peu de pàgina:

peu de pàgina data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Afegeix a Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet aquesta pàgina / a> / peu de pàgina>

Descripció

• Per afegir un botó a una pàgina web, codifiqueu un element a> amb l'atribut data-role definit a "botó".

Com es crea una barra de navegació

La figura 15-10 mostra com podeu afegir una barra de navegació a una pàgina web. Per fer-ho, codifiqueu un element div amb el seu rol de dades establert a "barra de navegació". Dins d’aquest element, codifiqueu un element ul que conté elements li que contenen els elements a> per als elements de la barra de navegació. Tingueu en compte, però, que no codifiqueu l'atribut data-role per als elements a>.

Per canviar el color dels elements de la barra de navegació, el codi d’aquest exemple inclou l’atribut data-theme-b de cada element. Com a resultat, jQuery Mobile canvia el color de fons de cada element del negre, que és el valor predeterminat, a un blau atractiu. A més, aquest codi estableix l'atribut de classe del botó actiu a "ui-btn-active", de manera que jQuery Mobile canvia el color del botó actiu a un blau més clar. Això mostra com podeu canviar el format que utilitza jQuery Mobile i, a continuació, en sabreu més informació.

L'HTML de la barra de navegació:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Inici / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Altaveus / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Contacteu amb nosaltres / a> / li> / ul> / div> / header>

Com es codifica l'HTML d'una barra de navegació:

• Codifiqueu un element div dins de l’element de capçalera. A continuació, configureu l'atribut data-role de l'element div a "navbar".
• Dins de l’element div, codifiqueu un element ul que contingui un element li per a cada enllaç.
• Dins de cada element li, codifiqueu un element a> amb un atribut href que utilitzi un marcador de posició per a la pàgina a la qual hauria d’anar l’enllaç. A continuació, configureu l'atribut data-icon a la icona que trieu.
• Per a l'element actiu de la barra de navegació, configureu l'atribut class a "ui-btn-active".Aleshores, el color d’aquest element serà més clar que els altres elements de la barra de navegació.
• També heu d’utilitzar l’atribut data-theme per aplicar un tema jQuery Mobile a cada element de la barra de navegació. En cas contrari, els botons de la barra tindran el mateix color que la resta de la capçalera. Per obtenir més informació sobre l’aplicació de temes, vegeu la figura 15-12.

Com formatar contingut amb jQuery Mobile

Com ja heu vist, jQuery Mobile formata automàticament els components d'una pàgina web basant-se en el seu propi full d'estil. Ara, obtindreu més informació sobre això i sobre com ajustar l’estil predeterminat que utilitza jQuery Mobile.

Els estils predeterminats que utilitza jQuery Mobile

La Figura 15-13 mostra els estils predeterminats que jQuery Mobile utilitza per a elements HTML comuns. Per a tots els seus estils, jQuery Mobile confia en el motor de renderització del navegador, de manera que el seu propi estil és mínim. Això manté els temps de càrrega ràpids i minimitza la despesa que un CSS excessiu imposaria a una pàgina.

Com podeu veure, l'estil de jQuery Mobile és tan eficaç que no haureu de modificar l'estil proporcionant el vostre propi full d'estil CSS. Per exemple, l'espaiat entre els elements de la llista sense ordenar i el format de la taula són acceptables tal com són. A més, el tipus de negre del fons gris coincideix amb el format de les aplicacions mòbils natives.

Descripció

• Per defecte, jQuery Mobile aplica automàticament estils als elements HTML d'una pàgina. Aquests estils no només són atractius, sinó que també imiten els estils natius del navegador.
• Per defecte, jQuery Mobile aplica una petita quantitat de farciment a l'esquerra, a la dreta, a la part superior i a la part inferior de cada pàgina per a mòbils.
• Per defecte, els enllaços són una mica més grans que el text normal. Això fa que l'usuari pugui tocar els enllaços més fàcilment.
• Per defecte, els enllaços es subratllen amb el color blau com a color de lletra.

Com aplicar temes a elements HTML

En alguns casos, voldreu canviar els estils predeterminats que utilitza jQuery Mobile. Ja ho heu vist a la barra de navegació de la figura 15-10. Per canviar els estils predeterminats, podeu utilitzar els cinc temes que proporciona jQuery Mobile. Aquests es resumeixen a la figura 15-12. Una vegada més, aquests temes estan destinats a imitar l'aparença d'una aplicació mòbil nativa.

Una manera d’aplicar temes és codificar un atribut tema-dades amb la lletra del tema com a valor. Ho heu vist a la barra de navegació de la figura 15-10 i ho podeu veure al codi de la segona barra de navegació d’aquesta figura. Aquí, l'atribut data-theme aplica el tema "e" a la capçalera i el tema "d" als elements de la barra de navegació.

L'altra forma d'aplicar temes és establir l'atribut de classe d'un element en un nom de classe que indiqui un tema. Ho il·lustra el primer exemple després de la taula. Aquí, l'atribut class s'utilitza per aplicar les classes "ui-bar" i "ui-bar- b" a l'element div. Com a resultat, jQuery Mobile primer aplica l’estil predeterminat per a una barra a l’element i després aplica el tema b a aquest estil. A les pàgines següents, veureu altres exemples d’aquest tipus d’estil.

Tingueu en compte que la taula d’aquesta figura diu que cal utilitzar el tema e amb moderació. Això es deu al fet que utilitza un color taronja que funciona bé per accentuar un element, però que no és atractiu en dosis grans. Ho il·lustra la segona capçalera i la barra de navegació d'aquesta figura, que tendeix a ser discordant quan es veu en color.

En general, el millor és mantenir-se amb els estils predeterminats i els tres primers temes, que normalment funcionen bé junts. Després, podeu experimentar amb temes d i e quan creieu que necessiteu alguna cosa més.

El codi HTML de la segona capçalera i la barra de navegació:

header data-role = "header" data-theme = "e"> h1> Ajuntament de SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Inici / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Altaveus / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Notícies / a> / li> / ul> / div> / header>

Els cinc temes de jQuery Mobile:

Dues maneres d'aplicar un tema:

En utilitzar un atribut de tema de dades:

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

En utilitzar un atribut de classe que indica el tema:

div> Barra / div>

Descripció

• En utilitzar els cinc temes que s’inclouen amb jQuery Mobile, podeu fer els ajustos adequats als estils predeterminats per als elements HTML.
• Tot i que podeu utilitzar el vostre propi full d’estil CSS amb una aplicació jQuery Mobile, heu d’evitar fer-ho sempre que sigui possible.

Perspectiva

L’ús de dispositius mòbils ha augmentat dràsticament en els darrers anys. Per això, ha esdevingut cada vegada més important dissenyar llocs web fàcils d'utilitzar des d'aquests dispositius. Tot i que normalment significa desenvolupar un lloc web independent, aquest pot ser un aspecte crític per mantenir la vostra presència a Internet.

Afortunadament, la tasca de construir un lloc web per a mòbils s’ha tornat molt més fàcil amb l’aparició de jQuery Mobile. Les pàgines web per a mòbils ja no es limiten a pàgines estàtiques que contenen encapçalaments, paràgrafs, enllaços i imatges en miniatura. Amb jQuery Mobile, els desenvolupadors web ara poden crear llocs web rics en funcions que semblen aplicacions natives per a mòbils.