Créer sa première application jQuery Mobile Code HTML 5 basique d'une application jQuery Mobile

La meilleure solution pour comprendre le fonctionnement de jQuery Mobile est encore de passer à la pratique. Commencez par créer une simple page HTML 5 qui inclut les bibliothèques jQuery et jQuery Mobile, comme dans l'Exemple 1.1.

Exemple 1.1. Code HTML 5 basique d'une application jQuery Mobile

<!DOCTYPE html>
<html>
   <head>
     <title>Application jQuery Mobile</title>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.
     ? mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
<body>
</body>
</html>


Il s'agit ici des éléments de base permettant de développer une application jQuery Mobile.

Ensuite, vous devez intégrer le contenu à proprement parler. Celui-ci doit être balisé de manière sémantique et, comme nous nous appuyons sur HTML 5, nous disposons de toutes les nouvelles balises telles que header, footer, section, nav, etc. Vous pouvez donc baliser le contenu à l'aide de ces tags ou l'encadrer avec des balises div standard.

Dans le cadre de ce premier exemple, nous souhaitons créer une simple page au sein de l'application qui correspond à une section, avec un en-tête, une zone de contenu et un pied de page. (Nous reviendrons plus en détail sur la notion de pages et de vues avec jQuery Mobile au cours du prochain chapitre. Pour l'heure, nous nous contentons d'illustrer le cas de figure le plus simple). Avec les balises div, le code ressemble à celui de l'Exemple 1.2.

Exemple 1.2. Une méthode un peu vieillotte : le balisage avec des div

<div class="section" id="page1">
  <div class="header"><h1>jQuery Mobile</h1></div>
  <div class="content">
     <p>Première page !</p>
  </div>
  <div class="footer"><h1>Pearson</h1></div>
</div>


Nous pouvons également déployer le même contenu à l'aide des balises section, header et footer du HTML 5, comme à l'Exemple 1.3.

Exemple 1.3. Une méthode plus moderne : le balisage du HTML 5

<section id="page1">
  <header><h1>jQuery Mobile</h1></header>
  <div class="content">
    <p>Première page !</p>
  </div>
  <footer><h1>Pearson</h1></footer>
</section>

jQuery Mobile fonctionne avec les deux styles de balisage, mais nous privilégierons systématiquement la seconde solution dans la suite de cet ouvrage.

jQuery Mobile ne nécessite pas de balises spécifiques, mais il doit apprendre, d'une manière ou d'une autre, les rôles des zones de contenu. Pour cela, il s'appuie sur un attribut spécial de data- : data-role. Parmi les valeurs acceptées de data-role, on retrouve page, header, content et footer.

Il s'agit ici de notre premier travail autour d'un attribut data- personnalisé. jQuery Mobile en fait un usage intensif pour désigner les fonctions, la mise en forme et les multiples comportements d'une application. Vous les parcourrez plus en détail lors des chapitres suivants ; nous nous concentrerons pour l'heure sur l'attribut data-role.

Précédent
Suivant