Démarrer avec jQuery Mobile
Pour commencer, il faut inclure (l'ordre a de l'importance) dans le head :
- la CSS de jQuery Mobile,
- le fichier JavaScript de jQuery,
- le JavaScript pour customiser les réglages par défaut,
- et le JavaScript de jQuery Mobile.
Ce qui nous donne :
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.js"></script>
<script src="js_custom_kiwi.js"></script>
<script src="jquery.mobile.min.js"></script>
Quelques éléments de compatibilité à savoir : jQuery Mobile 1.2.0 est compatible avec jQuery 1.7 jusqu'à 1.8.2. Bien sûr, les versions les plus récentes de jQuery sont recommandées.
L'exemple avait été développé avec jQuery Mobile 1.0.1, je l'ai mis à jour avec la version 1.2.0.
La structure d'une page simple est la suivante :
<body>
<div data-role="page">
<div data-role="header" data-theme="f">
<h1>Kiwi Partÿ, by Alsacréations</h1>
</div>
<div data-role="content">
Ici le contenu
</div>
</div>
</body>
Vous aurez noté les attributs, c'est un des principes de jQuery Mobile : les attributs data-* vont servir à indiquer ce dont on a besoin, et vont être ajoutés au code par jQuery et jQuery Mobile. En voici quelques exemples :
- data-role="page"
- le rôle du bloc
- data-transition="slide"
- la transition à effectuer
- data-mini="true"
- pour afficher un élément en plus petit
- data-theme="b"
- indique le thème à utiliser
Un loader AJAX charge les pages durant la navigation, s'occupe d'effectuer les transitions demandées. Peu importe si la page contient des redirections ou s’appelle elle-même (par exemple, un formulaire). Le tout est transparent pour l’internaute… et aussi (mais surtout) pour le développeur !
Si vous affichez la source, vous verrez le code donné dans les exemples de ce tutoriel. Par contre, si vous voulez voir le code généré, un outil comme Firebug vous permettra de voir toutes les classes et le code ajouté par le framework. Même si le code généré n'est pas horrible en soi, vous constaterez que la source est bien plus simple !
Créer la page d'accueil
La page d'accueil comporte un logo, un petit texte et une liste groupée de liens.
<p class="center">
<img src="/img/logo2012.png" alt="Kiwi Partÿ, goutez au web, pas aux pépins" width="320" height="89" />
</p>
<p>La Kiwi Party est un événement</p>
<ul data-role="listview" data-inset="true">
<li><a href="programme.php" data-transition="slide">Le programme</a></li>
<li><a href="orateurs.php" data-transition="slide">Les orateurs</a></li>
<li><a href="partenaires.php" data-transition="slide">Nos partenaires</a></li>
<li><a href="after.php" data-transition="slide">L':after</a></li>
<li><a href="contact.php" data-transition="slide">Nous donner un feedback</a></li>
</ul>
Comme vous pouvez le voir, la liste est extrêmement simple à obtenir : dans notre exemple, l'attribut data-role="listview" assure le look de la liste, data-inset="true" indique à la liste de s'insérer élégamment dans le contenu (avec des marges).
Sur les liens de la liste, l'attribut data-transition="slide" permettra de lancer la transition souhaitée quand on cliquera sur l'un deux.
Le footer (pied de page) est créé ainsi :
<footer data-role="footer" role="contentinfo">
<p class="center">Powered by Jquery Mobile</p>
</footer>
La classe center est un simple ajout personnel qui correspond à ceci : text-align:center;. Rien de bien sorcier, et nous avons déjà créé notre page en à peine quelques minutes. J'élude volontaiement le bouton, nous aborderons ce sujet dans les pages des orateurs.