jQuery mobile [Part1]

Thabet Mohamed Wael INSAT ANDROID CLUB
1
Atelier WebMobile : Tutoriel de jQueryMobile
Création d’un Formulaire
Objectifs
Identifier les différents éléments des formulaires avec jQueryMobile
Principe
On connait tous les éléments basiques d’un formulaire web ordinaire, mais en
utilisant jQuery mobile on peut profiter de l’ajout d’autres éléments ainsi que des
améliorations à ceux qu’on connait déjà.
Méthodes
Tout d’abord on doit intégrer les fichiers de jQuery (le fichier css, les 2 fichiers
JavaScript ainsi les images correspondants) au même dossier de notre site.
Vous pouvez télécharger le Framework jQueryMobile ici.
Vous pouvez également utiliser directement le Framework de cette manière :
Si vous ne savez pas encore comment relier les fichiers de jQuery à votre site,
copier ces lignes entre les 2 balises <head> de la page :

2
Vous pouvez devinez que la première ligne est pour faire le lien entre la page est le
document css associé (dans ce cas c’est celui de JQM). Les 2 lignes suivantes sont
pour faire intégrer les 2 scripts java et la 3ème
fonction est une fonction offerte
par JQM, vous pouvez remarquer qu’elle est vide car elle est utilisée pour modifier
(si on le veut) quelques configurations pour le projet (ce qui n’est pas le cas pour
nous).
Passons maintenant aux choses sérieuses (cela ne veut pas dire que ce qu’on faisait
depuis tout à l’heur ne l’est pas ). Les éléments qu’on peut ajouter un à un
formulaire sont : une zone de texte, les TEXTAREA, les boutons radios, les
checkbox… et pour nos traitement avec JQM on aura aussi les sliders.
La page qu’on va faire contiendra un formulaire d’inscription à un concours
d’embauche et après ce tuto vous aurez la page suivante:

3
1 – les zones de texte :
Le code « ordinaire » d’une zone de texte est le suivant :
<input type="text" name="name" id="name" value="" />
Toutefois, pour bénéficier à fond des avantages offerts par le JQM (oui, il faut en
profiter sinon vaut mieux économiser quelques kilooctets en ne copiant pas les
fichiers JQM ) le code deviendra comme ça :
En effet, j’ai préféré (et je crois que vous devriez me suivre) utiliser la balise li
afin de bien organiser les différents éléments (on pourra tout de même utiliser div
mais on aura quelques propriétés de plus à gérer). pour le data-role, comme son nom
l’indique, expliquera au navigateur le rôle de l’élément qu’on est en train d’ajouter
(pour notre cas : fieldcontain).

4
Recopier donc ce code pour le nom, le prénom, le tel, l’email et la password en
modifiant à chaque fois les paramètres nécessaires (basique, non ? )
2 – le slider :
Pour sélectionner le sexe du candidat, j’ai préféré employé les sliders offerts par
JQM, le choix se fera ainsi :
Vous l’aviez probablement compris, c’est pratiquement la même structure qu’une
liste déroulante.
3 – l’élément de saisie des dates :
Pour la date de naissance, on choisira un élément de type date :
4 – les boutons :
Pour les boutons le code sera un code html classique :

5
Donc finalement on aura le code complet suivant :
<html>
<head>
<meta charset="utf-8"/>
<title>Formulaire D'inscription </title>
<link rel="stylesheet" href="css/jquery.mobile-1.0a4.min.css" />
<script src="js/jquery.1.5.1.min.js"></script>
<script src="JS/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div id="home" data-role="page" data-theme="c">
<form name="f2" method="POST" action="#affichage">
<ul data-role="listview" data-insert="true">
<li data-role="fieldcontain">
<label for="nom">nom :</label>
<input type="text" name="name" id="name" value="" />
</li>
<label for="prenom">prenom:</label>
<input type="text" name="prenom" id="prenom" value="" />
</li>
<label for="email">email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<label for="prenom">tel : </label>
<input type="text" name="tel" id="tel" value="" />
</li>
<label for="password">password :</label>
<input type="text" name="password" id="password" value="" />
</li>
<label for="etudiant">gendre </label>
<select name="slider" id="flip-b" data-role="slider">
<option value="non">homme</option>
<option value="oui">femme</option>
</select>
</li>
<label for="end">Date de Naissance : </label>
<input type="date" id="end" name="end" />

6
</li>
<label for="textarea">poste : </label>
<textarea name="description" id="description"></textarea>
</li>
<button type="submit">Envoyer</button>
<button type="reset">RAZ</button>
</li>
</ul>
</form>
</div>
</body>
</html>
Allez allez, testez le vite :p
Vous pouvez à partir de maintenant manipulez les éléments des formulaires qu’on a
cités ici ☺
Comme vous le connaissez, on a effectué dans ce tuto qu’une seule partie du
traitement complet d’un formulaire (il nous manque la 2ème
phase consistant en le
traitement et la lecture des données saisies par un script ou une base). Un second
tuto sur cette partie vous sera communiqué prochainement ;)
Liens utiles
http://jquerymobile.com/demos/1.0/docs/forms/index.html
http://jquerymobile.com/demos/1.0/docs/content/index.html
*************************************
N’oubliez pas !, restez mobiles, restez Android ☺
Cordialement Mohamed Wael Thabet
03/12/2011

jQuery mobile [Part1]

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie jQuery mobile [Part1]

Ähnlich wie jQuery mobile [Part1] (20)

jQuery mobile [Part1]