Skip to content

Chapitre 01

Jump to bottom
ChristopheGueroult edited this page Sep 7, 2017 · 5 revisions

Préparer son premier projet jQuery Mobile

Notions abordées lors de ce chapitre

Installer jQuery Mobile en local

  • Télécharger jquery.mobile-1.4.5.zip depuis le site jQuery Mobile à l'adresse http://jquerymobile.com/download/
  • Dans le dossier demos, extraire les fichiers js/jquery.min.js, js/jquery.mobile-1.4.5.min.js
  • Extraire à la racine le fichier jquery.mobile-1.4.5.css
  • Extraire à la racine le dossier images
  • 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>

Créer une première page jQuery Mobile

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

Ouvrir un localhost avec lite-serveur

Terminal :

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

Clone this wiki locally