Le formulaire de contact
Le formulaire de contact aborde différents aspects : la gestion des champs, les transitions et la page de confirmation. Commençons par les champs :
<form action="contact.php" method="post" id="form" data-transition="flow" data-rel="dialog">
<h3>Kiwi Partÿ</h3>
<div data-role="fieldcontain">
<label for="id_name">Votre nom :</label>
<input type="text" name="name" id="id_name" value="" required="required" data-mini="true" />
</div>
...
<div data-role="fieldcontain">
<label for="id_note">Si vous deviez noter la Kiwi Partÿ 2012 :</label>
<input type="range" name="note" id="id_note" value="5" min="0" max="10" data-highlight="true" data-mini="true" /> (10 étant le nirvana)
</div>
<div data-role="fieldcontain">
<label for="id_deja_viendu">Vous aviez déjà participé à une Kiwi Partÿ ?</label>
<select name="deja_viendu" id="id_deja_viendu" data-role="slider" data-mini="true">
<option value="Non">Non</option>
<option value="Oui">Oui</option>
</select>
</div>
...
<div data-role="fieldcontain">
<label for="id_commentaire_orga">D'autres remarques pour les organisateurs ?</label>
<textarea name="commentaire_orga" id="id_commentaire_orga" required="required" data-mini="true"></textarea>
</div>
...
<div data-role="fieldcontain">
<label for="id_note_nico" class="select">Une appréciation de cette conférence/exemple :</label>
<select name="note_nico" id="id_note_nico" required="required" data-native-menu="false" data-mini="true">
<option value="">Choisissez une option</option>
<option value="Nul">/dev/null</option>
<option value="Moyen">Moyen</option>
<option value="Bien">Bien</option>
<option value="Très bien">Très bien</option>
<option value="Formerveilleufantasmidable">Formerveilleufantasmidable</option>
</select>
</div>
...
<div class="ui-grid-a" id="nogrid_border">
<div class="ui-block-a"> </div>
<div class="ui-block-b"><button type="submit" data-mini="true" data-inline="true" data-theme="d">Envoyer</button></div>
</div>
</form>
J'ai enlevé quelques champs non utiles plus le tutoriel. jQuery Mobile vous propose tous les types de champs habituels, plus quelques types améliorés. Il suffit de respecter la syntaxe suivante afin de bénéficier de la mise en page automatique.
<div data-role="fieldcontain">
<label for="id_champ">Ici le label</label>
<input type="text" name="champ" id="id_champ" value="" />
</div>
Comme vous pouvez le voir dans cet exemple, jQuery Mobile propose le type range (<input type="range" name="note" id="id_note" value="5" min="0" max="10" data-highlight="true" data-mini="true" />), améliore l'affichage des select à deux choix (via data-role="slider"), et propose un champ select amélioré (via data-native-menu="false").
Pour la transition, vous aurez noté dans la balise form les attributs suivants : data-transition="flow" data-rel="dialog". Cela indique quand le formulaire va être soumis et charger la page de remerciement de déclencher la transition flow et de charger la page suivante dans une boîte de dialogue. En résulte un effet très sympathique :
La page de confirmation sera ainsi :
<body>
<div data-role="dialog">
...
</div>
</body>
La page du formulaire s'appelle donc elle-même pour effectuer les tests d'erreur en PHP et l'envoi du mail, et elle redirige via header("Location: ./contact-thanks.php"); vers la page de remerciement. Comme vous pouvez le voir, le loader AJAX de jQuery Mobile n'est en nul point gêné par cette façon de faire, c'est totalement transparent pour l'internaute.
Avantage : si vous consultez ce formulaire sur un périphérique ayant une résolution inférieure à 450px, les label et les champs ne sont plus côte à côte mais empilés, afin d'offrir un confort de lecture adapté aux petits écrans. En fait, pour être totalement exact, c'est même l'affichage mobile qui est par défaut (mobile-first), et une média-query change cet affichage si la résolution est supérieure à 450 pixels.
J'ai dû tweaker un peu cette partie pour améliorer légèrement cet affichage, mais nous allons aborder cela dans la partie suivante !
Quelques trucs et astuces
Comme je le disais dans la partie précédente, j'ai dû légèrement améliorer cet affichage, car 450 pixels n'étaient pas assez, les labels du formulaire étaient tout entassés dans une colonne rikikie. Il m'a juste suffi de changer les media-queries qui gèrent cet affichage :
@media all and (min-width: 450px){
en
@media all and (min-width: 640px){
ainsi ce léger problème se solutionne simplement.
Le même genre de problème est survenu avec le programme, le Grid Layout est parfait si les cellules ont peu de contenu, mais dans le cas contraire, si on se retrouve sur un petit écran, les contenus peuvent être entassés dans des colonnes trop étroites. Dans ce cas, cela se solutionne très facilement ainsi via une media-query :
@media screen and (max-width: 640px){
.ui-grid-a .ui-block-a,.ui-grid-a .ui-block-b{
width:100%;
float:none;
}
.ui-grid-a .ui-block-b{
border-top:1px dotted #BBB;
}
}
Cela s'interprête ainsi : dans le cas où la largeur est inférieure à 640 pixels, le Grid Layout à deux colonnes voient leur colonnes non plus flottantes mais empilées les unes sur les autres, et prenant toute la largeur. Afin de gagner en lisibilité, je leur ai ajouté une bordure haute.
Toujours dans l'idée d'améliorer un peu le graphisme avec les media-queries, j'ai ajouté les images présentes sur le programme ainsi :
@media screen and (min-width: 800px){
#accueil .ui-collapsible-content{
background:#fff url(../img/autres/bg-accueil.jpg) 100% 0 no-repeat;
}
/* etc . */
}
Les thèmes par défaut sont au nombre de 5 (de "a" à "e"). Pour avoir le vert pour le titre, j'ai rajouté le thème "f". Jetez un oeil dans la CSS.
Autre point pour customiser vos applications Web avec jQuery Mobile, si l'on revient au tout début du tutoriel, j'avais mentionné le script pour paramétrer les réglages par défaut : <script src="js_custom_kiwi.js"></script>
Ce dernier contient ceci :
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "Loading kiwÿ modules...";
} );
Le $(document).bind("mobileinit", function(){ est l'équivalent de $(document).ready(function(){ de jQuery. Ainsi, le message du loader AJAX de jQuery Mobile sera customisé. Inutile donc indispensable.