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 ac.tuels C’est donc un choix interessant pour qui souhaiterait écrire un service mobile. Avec jQuery Mobile on écrit moins, pour créer plus, c’est le fameux « write Less, do more ».

Un site en jQuery doit absolument être écrit en HTML5, afin de profiter de toute la puissance du framework. Toute page en jQuery devrait donc au moins comporter ceci :

 

 

Ecran de base jQuery Mobile 
1
2
3
4
5
6
7
8
9
10
11
12
 
<!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>
</p>

 

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
2
3
 
<div data-role="page">
...
</div>
</p>

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 :

 

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>
</p>

 

Et une page complète serait donc :

 

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
 
<!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>
</p>

 

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. Ca donnerait ça au final :

Demo jQuery Mobile

 

Une liste est contenue dans une balise <ul>, suivi d’une ou de plusieurs balises <li>. Jusque là rien de neuf. Il faut ensuite ajouter un attribut spécial data-role= »listview » . 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 :

 

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 -->
</p>

Voir la démo

 

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