jQuery Mobile

Jquery propose depuis peu un framework JS et CSS pour Mobile.
Grâce à cette extension de jQuery c'est assez facile de développer une version mobile d'un site.

Concevons 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.htm"

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

Les fichiers correspondant à la version mobile

Il n'y a que deux fichiers à produire : un fichier contenant le HTML("site_mobile.htm") et un autre le CSS ("style_mobile.css").
Les autres fichiers sont mis à disposition par le site officiel de jQuery.

Le code de la page "site_mobile.htm" : partie HEAD

... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <link href ="style_mobile.css" rel ="stylesheet" > ...

jQuery Mobile est un framework JS mais aussi CSS donc il faut inclure une feuille de style et un fichier JS.
Il faut aussi inclure la librairie de base : jQuery.
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 !

Le code de la page "site_mobile.htm : partie BODY

Le code de trois pages sur 7 :

... <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 --> ...

Le feuille de style externe de jQuery Mobile 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.

Grâce à l'attribut data-role ="page" toutes les pages du site peuvent être dans le même fichier !!!
Par contre l'attribut data-role = "article" n'est pas stylé par le CSS de jQuery Mobile ...
Remarquez qu'à partir de "page2" il y a dans chaque page un lien de retour vers "page1" (page d'accueil).

La feuille de style "css_mobile.css"

Il faut styler entre autres les boîtes data-role= "article" et les liens dans les boîtes HEADER, etc.

	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; }

Les fichiers correspondant à la version PC

Il n'y a que deux fichiers à produire : un fichier avec le code HTML et un autre avec le code CSS.

Le fichier "site_pc.htm" (extraits)

... <meta name="viewport" content="width=device-width, initial-scale=1"> <link href ="style_pc.css" rel ="stylesheet" > </head> <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 --> ...

Je n'ai indiqué que le code de la première page.
Comme vous pouvez le remarquer le code de la partie BODY est strictement identique à celui du fichier "site_mobile.htm" !!!
Ainsi la maintenance du code HTML est grandement facilitée.

Dans la partie HEAD il y a seulement un lien vers une feuille de style : "style_pc.css".

Le code CSS de "style_pc.css"

* {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; }

Dans cette feuille CSS il faut styler les éléments affectés d'un attribut data-role mais aussi : les titres, les liens "retour" (vers la page d'accueil).

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).

A défaut de smartphone vous pouvez simuler l'affichage d'un mobile sur votre PC en utilisant un émulateur mobile en ligne tel : emulateur mobile
Dans le champ "site à émuler" saisissez : http://darchevillepatrick.info/js/site_mobile.htm
Retour menu