Logo jQuery MobilejQuery Mobile est un excellent framework de développement d’applications web mobiles, qui se propose, comme la plupart des Frameworks de développement mobile, d’offrir un ensemble d’outils à base de technologies du web, pour construire des applications indépendantes du matériel mobile. Il est compatible avec tous les OS mobiles actuels et beaucoup d’entrepreneur s’en servent dans leurs projets. Le site de musique en ligne Deezer s’en sert dans sa version mobile (http://m.deezer.com).

jQuery Mobile, qui est très facile à prendre en main, est donc un choix interessant pour qui souhaiterait écrire un service mobile en écrivant moins, tout en créant plus : c’est le fameux « write Less, do more ».

Un site en jQuery Mobile s’êcrit en HTML5. Toute page doit au moins comporter ceci :

Ecran de base jQuery Mobile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a3.min.js"> </script> </head> <body>     ... </body> </html>

Chaque écran de l’application est représenté par une page, qui est le plus souvent une balise <div>. Le framework propose l’attribut spécial data-role= »page » qui caractérise une page (écran) :

1 
<div data-role="page">...</div>

Et dans chaque page, on peut insérer tout ce que l’on veut, du code php, html…On y décrit une structure (gabarit ou template) pour notre écran actuel. On peut par exemple imaginer un écran avec un bloc d’entête, un bloc de contenu et un pied de page. Ca donnerait ça :

Structure d’une page jQuery Mobile
1 2 3 4 5 
<div data-role="page">        <div data-role="header">...</div>        <div data-role="content">...</div>        <div data-role="footer">...</div> </div>

Une page complète s’écrit finalement :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
<!DOCTYPE html> <html>     <head>     <title>Page Title</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"> </script> </head> <body>   <div data-role="page">       <div data-role="header">         <h1>Titre de l'écran actuel</h1>     </div><!-- /entete -->       <div data-role="content">            <p>Contenu de l'écran actuel.</p>            </div><!-- /contenu -->       <div data-role="footer">         <h4>Pied de page</h4>     </div><!-- /footer --> </div><!-- /Fin de la page -->   </body> </html>

Essayons de compliquer un peu. Nous allons écrire un écran simple, avec une liste de liens menant à d’autres pages (écrans). Cette page proposera de consulter mon CV, ma liste de projets, et le contenu de mon blog. Chaque élément de la liste menant à chacun des contenus. Ça donnerait ça au final

Demo jQuery Mobile

Pour générer une liste de ce type il faut utiliser un attribut spécial nommé data-role= »listview » à l’interieur d’une balise ul.

Il est possible de varier les couleurs pour chaque bloc de liens en modifiant l’attribut data-theme. L’élement qui sert d’entête à la liste est désigné par l’attribut data-role qui a pour valeur list-divider. Nos deux blocs de liens (A propos de moi, Mon blog) s’écrivent donc :

Page complète
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<div data-role="content">         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                  <li data-role="list-divider">A propos de moi</li>                  <li><a href="pages/cv.php">Mon CV</a></li>                  <li><a href="#">Mes projets</a></li>         </ul><!-- A propos de moi-->         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                   <li data-role="list-divider">Mon blog</li>                   <li><a href="#">Software (Android, Windows Phone 7,  IOS...)</a></li>                   <li><a href="#">Hardware (Freebox, Systèmes embarqués,...)</a></li>                   <li><a href="#">Web (HTML 5,CSS 3,...)</a></li>                   <li><a href="#">News</a></li>         </ul><!-- Mon blog--> </div><!-- contenu de la page -->

Voir la démo

Pour en savoir plus sur jQuery Mobile, le mieux c’est de lire la documentation qui est vraiment bien faite.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.