jQuery mobile [Part1]

797 vues

Publié le

jQuery mobile [Part1]
Atelier Web Mobile
2011-2012

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
797
Sur SlideShare
0
Issues des intégrations
0
Intégrations
46
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

jQuery mobile [Part1]

  1. 1. 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. 2. Thabet Mohamed Wael INSAT ANDROID CLUB 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. 3. Thabet Mohamed Wael INSAT ANDROID CLUB 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. 4. Thabet Mohamed Wael INSAT ANDROID CLUB 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. 5. Thabet Mohamed Wael INSAT ANDROID CLUB 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> <li data-role="fieldcontain"> <label for="prenom">prenom:</label> <input type="text" name="prenom" id="prenom" value="" /> </li> <li data-role="fieldcontain"> <label for="email">email:</label> <input type="text" name="email" id="email" value="" /> </li> <li data-role="fieldcontain"> <label for="prenom">tel : </label> <input type="text" name="tel" id="tel" value="" /> </li> <li data-role="fieldcontain"> <label for="password">password :</label> <input type="text" name="password" id="password" value="" /> </li> <li data-role="fieldcontain"> <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> <li data-role="fieldcontain"> <label for="end">Date de Naissance : </label> <input type="date" id="end" name="end" />
  6. 6. Thabet Mohamed Wael INSAT ANDROID CLUB 6 </li> <li data-role="fieldcontain"> <label for="textarea">poste : </label> <textarea name="description" id="description"></textarea> </li> <li data-role="fieldcontain"> <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

×