jQuery Mobile

JQuery propose depuis peu une extension du celèbre framework JavaScript destinée au développement de sites pour mobiles.

Imaginons que l'on doive produire le site d'un hôtel restaurant *** : "l'auberge du cheval blanc".
Le dirigeant de l'établissement souhaite deux versions : une version pour PC et une version pour mobile.
Je vais vous montrer dans ce chapitre qu'à condition d'utiliser la librairie jQuery Mobile le développement de deux versions n'entraîne pas des coûts prohibitifs.

Le code de la page "index.php"

... <noscript> <meta http-equiv="refresh" content="1;site_pc.php"> </noscript> </head> <body> <script> if (screen.width < 900) window.location ="site_mobile.php" ; else window.location ="site_pc.php" ; </script> ...

Remarquez que le conteneur NOSCRIPT.
Donc en cas de désactivation du JavaScript il y a redirection vers la version PC du site. C'est en effet sur les ordinateurs de bureau que JS est souvent désactivé.
Si JavaScript est activé un test oriente vers la page "site_mobile.htm" ou "site_pc.htm en fonction de la largeur de l'écran.

La version mobile du site

Une seule page : site_mobile.php qui contient de nombreux liens et inclut un fichier correspondant au contenu du site.

Le code de la page "site_mobile.php"

<!DOCTYPE html> <html> <head> <title>Onglet à fermer</title> <meta charset = "utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="https://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <style> article[data-role ="article"]{width : 96% ; margin :auto ; background : white ;min-height : 200px; } p {margin :10px ; } h1,h2,h3 {text-align : center; } header a {display : block ; width : 20% ; height : 30px ; line-height : 30px ; background : black ; color : white ; text-align : center; } </style> </head> <?php include("contenu_site.htm"); ?> </html>

jQuery Mobile est un framework JS & CSS donc il faut inclure une feuille de style et un fichier JS.
Il faut aussi inclure la librairie de base jQuery car l'extension ne peut fonctionner seule !
Ici les fichiers sont téléchargés directement sur serveur code.jquery.com. Ainsi on est sûr d'avoir la version stable la plus récente. On peut aussi les télécharger à partir du serveur GOOGLE !

Attention il faut désormais saisir "https" (et non plus "http").

La feuille de style interne de la page est très succincte en effet c'est jQuery Mobile via son fichier CSS qui met en forme les éléments affectés des fameux attributs personnalisés : les attributs data-*. Tous les attributs data-* utilisés par le framework sont nommés data-role avec différentes valeurs : page, header, content, footer, listview, etc.
Par contre l'attribut data-role = "article" n'est pas stylé par le CSS de jQuery Mobile ; c'est un attribut que j'ai imaginé donc je dois le styler dans la feuille de style interne de la page!

Le code du fichier "contenu_site.htm"

Il contient le code HTML correspondant au contenu pour les deux versions du site.
Le code n'est pas complet : seulement les trois premières pages du site.

<body> <div data-role="page" id ="page1" > <header data-role="header"> <h1>Auberge du cheval blanc</h1> </header> <section data-role="content"> <h2>Accueil</h2> <ul data-role="listview"> <li><a href="#page2">Le restaurant</a></li> <li><a href="#page3">Les chambres</a></li> <li><a href="#page4">Les services</a></li> <li><a href="#">A visiter aux environs</a></li> <li><a href="#">Accès</a></li> <li><a href="#">Nous contacter</a></li> </ul> <article data-role ="article"> <p> </article> </section> <footer data-role ="footer"> <p>Adresse : ... <p>Mail : ... <p>Téléphone : ... </footer> </div><!-- /page --> <div data-role="page" id ="page2" > <header data-role="header"> <a href ="#page1" >Retour</a> <h1>Auberge du cheval blanc</h1> </header> <section data-role="content"> <h2>Le restaurant</h2> <article data-role ="article"> <h3>La salle pour groupes</h3> </article > <article data-role ="article"> <h3>Carte et menus</h3> </article> </section> <footer data-role ="footer"> <p>Adresse : ... <p>Mail : ... <p>Téléphone : ... </footer> </div><!-- /page --> <div data-role="page" id ="page3" > <header data-role="header"> <a href ="#page1" >Retour</a> <h1>Auberge du cheval blanc</h1> </header> <section data-role="content"> <h2>Les chambres</h2> <article data-role ="article"> <h3>Les chambres luxe</h3> </article> <article data-role ="article"> <h3>Les chambres grand luxe</h3> </article> </section> <footer data-role ="footer"> <p>Adresse : ... <p>Mail : ... <p>Téléphone : ... </footer> </div><!-- /page --> <div data-role="page" id ="page4" > <header data-role="header"> <a href ="#page1" >Retour</a> <h1>Auberge du cheval blanc</h1> </header> <section data-role="content"> <h2>Les services</h2> <article data-role ="article"> <h3>Le sauna hamman</h3> </article> <article data-role ="article"> <h3>La piscine couverte chauffée</h3> </article> </section> <footer data-role ="footer"> <p>Adresse : ... <p>Mail : ... <p>Téléphone : ... </footer> </div><!-- /page --> </body>

Grâce à l'attribut data-role ="page" toutes les pages du site peuvent être dans le même fichier !!!

Remarquez qu'à partir de "page2" il y a dans chaque page un lien pour retourner vers "page1" (page d'accueil du site).

La version mobile

Là aussi il n'y a qu'une page :"site_pc.php" !

Le fichier "site_pc.php"

<!DOCTYPE html> <html> <head> <title>Onglet à fermer</title> <meta charset = "utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {margin : 0 ; padding : 0 ; font-size : 16px ; } div[data-role ="page"] {min-height : 700px; width :900px; border : 1px solid black ; margin :auto ; margin-bottom:500px; } header[data-role ="header"] {min-height : 100px ; margin-top : 20px ; background : lightgrey ; } section[data-role ="content"] {min-height : 400px ; margin-top : 20px ; background : lightgrey ; } footer[data-role ="footer"] {min-height : 100px ; margin-top : 20px ; background : lightgrey ; } ul[data-role ="listview"] {width : 30% ; float : left ; margin : 1% ; background : white; list-style : none ; min-height : 200px; } article[data-role ="article"]{width : 46% ; float : left ; margin :1% ; background : white ;min-height : 200px; } a {font-size : 110% ; text-decoration : none ; } a:hover {color : red ; font-size:150% ; } li a {margin : 10px ; } p {margin :10px ; } h1,h2,h3 {text-align : center;} h1 {font-size :140% ; } h2 {font-size :120% ; } header a {display : block ; width : 15% ; height : 30px ; line-height : 30px ; background : black ; color : white ; text-align : center; } </style> </head> <?php include("contenu_site.htm"); ?> </html>

La feuille de style interne est beaucoup plus lourde que dans la version mobile puisqu'il faut styler tous les éléments dotés des attributs data-*.
Pour la partie BODY et comme pour la version mobile, il suffit d'inclure le fichier contenu_site.htm.

Maintenance du site

Pour changer l'apparence de la version PC il faudra modifier la feuille de style interne de la page "site_pc.php".

Donc pour faire évoluer le contenu il suffit de modifier le fichier "contenu_site.htm" et les mises à jour seront répercutées dans les deux versions !

Essais

Aperçu du site sur un smartphone ou tablette

Aperçu du site sur un ordinateur

Tests

Attention : seuls les trois premiers liens fonctionnent !

Visitez le site de l'hôtel sur un PC puis sur un petit écran (smartphone) afin de visualiser les deux versions.
Visitez le site de l'auberge !

Essayez sur votre mobile (smartphone ou tablette) puis sur votre ordinateur portable (ou de bureau).
Selon la taille de l'écran du terminal vous allez charger "site_pc.php ou "site_mobile.php".
Retour menu