Créez un site Web mobile avec jQuery Mobile

Contenu

• Comment coder plusieurs pages dans un seul fichier HTML
• La description
• Comment utiliser les boîtes de dialogue et les transitions
• Les transitions utilisables
• La description
• Comment créer des boutons
• La description
• Comment créer une barre de navigation
• Comment coder le HTML pour une barre de navigation:
• Comment formater du contenu avec jQuery Mobile
• Les styles par défaut utilisés par jQuery Mobile
• La description
• Comment appliquer des thèmes à des éléments HTML
• Deux façons d'appliquer un thème:
• La description
• Perspective

Ceci est un extrait édité du chapitre 15 de HTML5 et CSS3 de Murach par Zak Ruvalcaba et Anne Boehm.

jQuery Mobile est une bibliothèque JavaScript gratuite, open source et multiplateforme que vous pouvez utiliser pour développer des sites Web mobiles. Cette bibliothèque vous permet de créer des pages qui ressemblent aux pages d'une application mobile native.

Bien que jQuery Mobile soit actuellement disponible en version bêta-test, cette version fournit déjà toutes les fonctionnalités dont vous avez besoin pour développer un excellent site Web mobile. En conséquence, vous pouvez commencer à l'utiliser tout de suite. Vous pouvez également vous attendre à ce que cette version soit continuellement améliorée, de sorte que jQuery Mobile ne fera que s'améliorer.

Dans cet article, vous apprendrez les techniques de base pour créer les pages d'un site Web mobile. Cela inclura l'utilisation de boîtes de dialogue, de boutons et de barres de navigation.

Comment coder plusieurs pages dans un seul fichier HTML

Contrairement à la façon dont vous développez les pages Web pour un site Web à écran, jQuery Mobile vous permet de créer plusieurs pages dans un seul fichier HTML. Ceci est illustré par la figure 15-7. Ici, vous pouvez voir deux pages d'un site avec le code HTML de ces pages. Ce qui est surprenant, c'est que les deux pages sont codées dans un seul fichier HTML.

Pour chaque page, vous codez un élément div avec "page" comme valeur de l'attribut data-role. Ensuite, dans chacun de ces éléments div, vous codez les éléments div pour l'en-tête, le contenu et le pied de page de chaque page. Plus tard, lorsque le fichier HTML est chargé, la première page du corps du fichier s'affiche.

Pour créer un lien entre les pages du fichier HTML, vous utilisez des espaces réservés comme indiqué dans la figure 7-11 du chapitre 7. Par exemple, l'élément a> de la première page de cet exemple va à «#toobin» lorsque l'utilisateur appuie sur le h2 ou élément img codé comme contenu de ce lien. Cela fait référence à l'élément div avec «toobin» comme attribut id, ce qui signifie que le fait d'appuyer sur le lien amène le lecteur à la deuxième page du fichier.

Bien que cet exemple ne montre que deux pages, vous pouvez coder plusieurs pages dans un seul fichier HTML. N'oubliez pas, cependant, que toutes les pages ainsi que leurs images, leurs fichiers JavaScript et CSS sont chargés avec le seul fichier HTML. En conséquence, le temps de chargement deviendra excessif si vous stockez trop de pages dans un seul fichier. Lorsque cela se produit, vous pouvez diviser vos pages en plusieurs fichiers HTML.

Le HTML pour les deux pages dans le corps d'un fichier HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> Les orateurs 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 octobre 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - LES ÉLÉMENTS POUR LE RESTE DES INTERVENANTS - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / 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> Auteur du best-seller acclamé par la critique, i> The Nine:! - LA COPIE CONTINUE -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

La description

• Lorsque vous utilisez jQuery Mobile, vous n'avez pas besoin de développer un fichier HTML distinct pour chaque page. Au lieu de cela, dans l'élément body d'un seul fichier HTML, vous codez un élément div pour chaque page avec son attribut data-role défini sur «page».
• Pour chaque élément div, vous définissez l'attribut id sur une valeur d'espace réservé accessible par les attributs href dans les éléments a> d'autres pages.

Comment utiliser les boîtes de dialogue et les transitions

La Figure 15-8 montre comment créer une boîte de dialogue qui s'ouvre lorsqu'un lien est tapé. Pour ce faire, vous codez la boîte de dialogue comme vous le feriez pour n'importe quelle page. Mais dans l'élément a> qui accède à cette page, vous codez un attribut data-rel avec «dia- log» comme valeur.

Comme le montrent les exemples de cette figure, le fichier CSS jQuery Mobile formate une boîte de dialogue différemment d'une page Web normale. Par défaut, une boîte de dialogue aura un arrière-plan sombre avec du texte de premier plan blanc, et l'en-tête et le pied de page ne couvriront pas la largeur de la page. Une boîte de dialogue aura également un «X» dans l'en-tête que l'utilisateur doit appuyer pour revenir à la page précédente.

Lorsque vous codez un élément a> qui accède à une autre page ou boîte de dialogue, vous pouvez également utiliser l'attribut data-transition pour spécifier l'une des six transitions résumées dans le tableau de cette figure. Chacune de ces transitions est destinée à imiter un effet utilisé par un appareil mobile comme un iPhone.

Les transitions utilisables

HTML qui ouvre la page sous forme de boîte de dialogue avec la transition «pop»:

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

HTML qui ouvre la page avec la transition «fondu»:

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

La description

• Le HTML pour un boite de dialogue est codé de la même façon qu'une page est codée. Cependant, l'élément a> qui renvoie à la page inclut l'attribut data-rel avec «dialog» comme valeur. Pour fermer la boîte de dialogue, l'utilisateur appuie sur le X dans l'en-tête de la boîte.
• Pour spécifier le mode d'ouverture d'une page ou d'une boîte de dialogue, vous pouvez utiliser l'attribut de transition de données avec l'une des valeurs du tableau ci-dessus. Si un périphérique ne prend pas en charge la transition que vous spécifiez, l'attribut est ignoré.
• Le style d'une boîte de dialogue est effectué par le fichier CSS jQuery Mobile.

Comment créer des boutons

La Figure 15-9 montre comment utiliser les boutons pour naviguer d'une page à une autre. Pour ce faire, il vous suffit de définir l'attribut data-role pour un élément a> sur «button», et jQuery Mobile s'occupe du reste.
Cependant, vous pouvez également définir d'autres attributs pour les boutons. Si, par exemple, vous souhaitez que deux boutons ou plus apparaissent côte à côte, comme les deux premiers boutons de cette figure, vous pouvez définir l'attribut data-inline sur «true».

Si vous souhaitez ajouter l'une des 18 icônes fournies par jQuery Mobile à un bouton, vous codez également l'attribut data-icon. Par exemple, le troisième bouton de cet exemple utilise l'icône «supprimer» et le quatrième bouton utilise l'icône «accueil». Toutes ces icônes ressemblent aux icônes que vous pourriez voir dans une application mobile native. Incidemment, ces icônes ne sont pas des fichiers séparés auxquels la page doit accéder. Au lieu de cela, ils sont fournis par la bibliothèque jQuery Mobile.

Si vous souhaitez regrouper deux boutons ou plus horizontalement, comme les boutons Oui, Non et Peut-être dans cette figure, vous pouvez coder les éléments a> pour les boutons dans un élément div qui a «controlgroup» comme attribut data-role et «Horizontal» comme attribut de type de données. Ou, pour regrouper les boutons verticalement, vous pouvez changer l'attribut de type de données en «vertical».

Si vous définissez l'attribut data-rel d'un bouton sur «back» et l'attribut href sur le symbole dièse (#), le bouton retournera à la page qui l'a appelé. En d'autres termes, le bouton fonctionne comme un bouton Retour. Ceci est illustré par le dernier bouton du contenu de la page.

Les deux derniers boutons montrent comment les boutons apparaissent dans le pied de page d'une page. Ici, les icônes et le texte sont blancs sur fond noir. Dans ce cas, l'attribut class du pied de page est défini sur «ui-bar», ce qui indique à jQuery Mobile qu'il doit mettre un peu plus d'espace autour du contenu du pied de page. Vous en apprendrez plus à ce sujet dans la figure 15-12.

Le HTML pour les boutons de la section:

! - Pour les boutons en ligne, définissez l'attribut de ligne de données sur true -> a href = "#" data-role = "button" data-inline = "true"> Annuler / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Pour ajouter une icône à un bouton, utilisez l'attribut data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Supprimer / a> a href =" # "data-role =" button "data-icon =" home "> Accueil / a>! - Pour regrouper les boutons, utilisez un élément div avec les attributs qui suivent -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Oui / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Non / a> a href = "#" data-role = "button"> Peut-être / a> / div>! - À code un bouton Retour, définissez l'attribut data-rel sur back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Retour à la page précédente / a >

Le HTML des boutons du pied de page:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Ajouter à Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet cette page / a> / pied de page>

La description

• Pour ajouter un bouton à une page Web, vous codez un élément a> avec son attribut data-role défini sur «button».

Comment créer une barre de navigation

La figure 15-10 montre comment ajouter une barre de navigation à une page Web. Pour ce faire, vous codez un élément div avec son rôle de données défini sur «navbar». Dans cet élément, vous codez un élément ul qui contient des éléments li qui contiennent les éléments a> des éléments de la barre de navigation. Notez, cependant, que vous ne codez pas l'attribut data-role pour les éléments a>.

Pour modifier la couleur des éléments de la barre de navigation, le code de cet exemple inclut l'attribut data-theme-b pour chaque élément. En conséquence, jQuery Mobile change la couleur d'arrière-plan de chaque élément du noir, qui est la valeur par défaut, à un bleu attrayant. De plus, ce code définit l'attribut de classe du bouton actif sur «ui-btn-active» afin que jQuery Mobile change la couleur du bouton actif en un bleu plus clair. Cela montre comment vous pouvez modifier le formatage utilisé par jQuery Mobile, et vous en apprendrez plus à ce sujet ensuite.

Le HTML de la barre de navigation:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Accueil / 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"> Contactez-nous / a> / li> / ul> / div> / header>

Comment coder le HTML pour une barre de navigation:

• Codez un élément div dans l'élément d'en-tête. Ensuite, définissez l'attribut data-role de l'élément div sur «navbar».
• Dans l'élément div, codez un élément ul qui contient un élément li pour chaque lien.
• Dans chaque élément li, codez un élément a> avec un attribut href qui utilise un espace réservé pour la page vers laquelle le lien doit aller. Ensuite, définissez l'attribut icône de données sur l'icône de votre choix.
• Pour l'élément actif dans la barre de navigation, définissez l'attribut class sur «ui-btn-active».Ensuite, la couleur de cet élément sera plus claire que les autres éléments de la barre de navigation.
• Vous devez également utiliser l'attribut data-theme pour appliquer un thème jQuery Mobile à chaque élément de la barre de navigation. Sinon, les boutons de la barre seront de la même couleur que le reste de l'en-tête. Pour en savoir plus sur l'application de thèmes, reportez-vous à la figure 15-12.

Comment formater du contenu avec jQuery Mobile

Comme vous l'avez déjà vu, jQuery Mobile formate automatiquement les composants d'une page Web en fonction de sa propre feuille de style. Maintenant, vous en apprendrez plus à ce sujet, ainsi que sur la façon d'ajuster le style par défaut utilisé par jQuery Mobile.

Les styles par défaut utilisés par jQuery Mobile

La Figure 15-13 montre les styles par défaut que jQuery Mobile utilise pour les éléments HTML courants. Pour tous ses styles, jQuery Mobile s'appuie sur le moteur de rendu du navigateur afin que son propre style soit minimal. Cela maintient les temps de chargement rapides et minimise la surcharge qu'un CSS excessif imposerait à une page.

Comme vous pouvez le voir, le style de jQuery Mobile est si efficace que vous ne devriez pas avoir besoin de modifier son style en fournissant votre propre feuille de style CSS. Par exemple, l'espacement entre les éléments de la liste non ordonnée et la mise en forme du tableau sont tous deux acceptables tels quels. En outre, le type noir sur fond gris est cohérent avec le formatage des applications mobiles natives.

La description

• Par défaut, jQuery Mobile applique automatiquement des styles aux éléments HTML d'une page. Ces styles sont non seulement attrayants, mais imitent également les styles natifs d'un navigateur.
• Par défaut, jQuery Mobile applique une petite quantité de remplissage à gauche, à droite, en haut et en bas de chaque page mobile.
• Par défaut, les liens sont légèrement plus grands que le texte normal. Cela permet à l'utilisateur d'appuyer plus facilement sur les liens.
• Par défaut, les liens sont soulignés en bleu comme couleur de police.

Comment appliquer des thèmes à des éléments HTML

Dans certains cas, vous souhaiterez modifier les styles par défaut utilisés par jQuery Mobile. Vous avez déjà vu cela dans la barre de navigation de la figure 15-10. Pour modifier les styles par défaut, vous pouvez utiliser les cinq thèmes fournis par jQuery Mobile. Celles-ci sont résumées dans la figure 15-12. Là encore, ces thèmes sont destinés à imiter l'apparence d'une application mobile native.

Une façon d'appliquer des thèmes consiste à coder un attribut de thème de données avec la lettre du thème comme valeur. Vous l'avez vu dans la barre de navigation de la figure 15-10, et vous pouvez le voir dans le code de la deuxième barre de navigation de cette figure. Ici, l'attribut data-theme applique le thème «e» à l'en-tête et le thème «d» aux éléments de la barre de navigation.

L'autre façon d'appliquer des thèmes consiste à définir l'attribut de classe d'un élément sur un nom de classe qui indique un thème. Ceci est illustré par le premier exemple après le tableau. Ici, l'attribut class est utilisé pour appliquer à la fois les classes «ui-bar» et «ui-bar-b» à l'élément div. Par conséquent, jQuery Mobile applique d'abord son style par défaut pour une barre à l'élément, puis applique le thème b à ce style. Dans les pages qui suivent, vous verrez d'autres exemples de ce type de style.

Veuillez noter que le tableau de cette figure indique d'utiliser le thème e avec parcimonie. C'est parce qu'il utilise une couleur orange qui fonctionne bien pour accentuer un article, mais qui n'est pas attrayant à fortes doses. Ceci est illustré par le deuxième en-tête et la barre de navigation de cette figure, qui ont tendance à être discordants lorsque vous le voyez en couleur.

En général, il est préférable de conserver les styles par défaut et les trois premiers thèmes, qui fonctionnent généralement bien ensemble. Ensuite, vous pouvez expérimenter avec les thèmes d et e lorsque vous pensez avoir besoin de quelque chose de plus.

Le code HTML du deuxième en-tête et de la barre de navigation:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Accueil / a> / li> li> a href =" # locuteurs "data-icon =" star "data-theme =" d "> Haut-parleurs / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Actualités / a> / li> / ul> / div> / header>

Les cinq thèmes jQuery Mobile:

Deux façons d'appliquer un thème:

En utilisant un attribut de thème de données:

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

En utilisant un attribut de classe qui indique le thème:

div> Barre / div>

La description

• En utilisant les cinq thèmes inclus avec jQuery Mobile, vous pouvez apporter les ajustements appropriés aux styles par défaut pour les éléments HTML.
• Bien que vous puissiez utiliser votre propre feuille de style CSS avec une application jQuery Mobile, vous devez éviter de le faire autant que possible.

Perspective

L'utilisation des appareils mobiles a considérablement augmenté ces dernières années. Pour cette raison, il est devenu de plus en plus important de concevoir des sites Web faciles à utiliser à partir de ces appareils. Bien que cela implique généralement le développement d'un site Web distinct, cela peut être un aspect essentiel du maintien de votre présence sur Internet.

Heureusement, la tâche de créer un site Web mobile est devenue beaucoup plus facile avec l'avènement de jQuery Mobile. Les pages Web mobiles ne sont plus limitées aux pages statiques contenant des en-têtes, des paragraphes, des liens et des images miniatures. Avec jQuery Mobile, les développeurs Web peuvent désormais créer des sites Web riches en fonctionnalités qui ressemblent à des applications mobiles natives.