Chapitre 01

Au cours de ce chapitre nous allons aborder les points suivants :

• Implémenter jQuery Mobile en local
• Créer une première page jQuery Mobile
• Ouvrir un localhost avec lite-serveur
• Les balises spécifiques aux smartphones

Installer jQuery Mobile en local.

1. Télécharger jquery.mobile-1.4.5.zip depuis le site jQuery Mobile à l'adresse http://jquerymobile.com/download/
2. Dans le dossier demos, extraire les fichiers js/jquery.min.js, js/jquery.mobile-1.4.5.min.js
3. Extraire à la racine le fichier jquery.mobile-1.4.5.css
4. Extraire à la racine le dossier images
5. Ajouter les balises link et script dans la page html

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

6. Terminal : lancer la commande npm run dev.
7. Ouvrir dans le navigateur http://localhost:3000/CHAPITRE-01/p1.html

Créer une page

<div data-role="page">
   //code
</div>

L'attribut data-role=page permet de délimiter un bloc représentant une page.

<div data-role="header">
   //code
</div>

L'attribut data-role=header permet de créer une entête.

<div role="main" class="ui-content">
   //code
</div>

L'attribut role=main et la class=ui-content permettent de créer le corps de la page.

<div data-role="footer">
   //code
</div>

L'attribut data-role=footer permet de créer un pied de page.

Balises spécifiques aux smartphones

<meta name="viewport" content="width=device-width, initial-scale=1">

Indique au smartphone qu'il ne doit plus redimensionner les éléments du site pour les adapter à son device. Le viewport prend la taille du device. Initialise la transformation à 1 pour 1. Les redimensionnements se feront désormais via les media queries dans le css.

<meta name="apple-mobile-web-app-capable" content="yes">

Permet d'afficher une web app en mode plein écran sur un smartphone ou une tablette. Fonctionne également sous Android.

<link rel="apple-touch-icon" href="images/logo-jquerym.jpg">

Permet de définir une image d'icon pour ajouter l'application web à l'écran d'accueil du smartphone. L'icon prend les styles du téléphone (bords arrondis) comme pour les applications téléchargées sur les stores.

<meta name="apple-touch-startup-image" content="images/ajax-loader.gif">

Permet d'afficher une image lors du chargement de la web app.

Démos

https://christophegueroult.github.io/jQueryMobile/CHAPITRE-01/p1.html https://christophegueroult.github.io/jQueryMobile/CHAPITRE-01/p2.html