SlideShare une entreprise Scribd logo
1  sur  6
Télécharger pour lire hors ligne
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 :
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:
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).
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 :
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" />
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

Contenu connexe

Tendances (16)

Mpdf 8
Mpdf 8Mpdf 8
Mpdf 8
 
Mpdf 10
Mpdf 10Mpdf 10
Mpdf 10
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
php
phpphp
php
 
Mpdf 2
Mpdf 2Mpdf 2
Mpdf 2
 
Mpdf 6
Mpdf 6Mpdf 6
Mpdf 6
 
Mpdf 7
Mpdf 7Mpdf 7
Mpdf 7
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Crud+tutorial+fr
Crud+tutorial+frCrud+tutorial+fr
Crud+tutorial+fr
 
Html 5
Html 5Html 5
Html 5
 
Mpdf 4
Mpdf 4Mpdf 4
Mpdf 4
 
MeasureCamp Paris #5 , Présentation Bigquery = big problem?
MeasureCamp Paris #5 , Présentation Bigquery = big problem? MeasureCamp Paris #5 , Présentation Bigquery = big problem?
MeasureCamp Paris #5 , Présentation Bigquery = big problem?
 
Marzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEEMarzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEE
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Mpdf 12
Mpdf 12Mpdf 12
Mpdf 12
 
CSS 3
CSS 3CSS 3
CSS 3
 

En vedette

En vedette (6)

jQuery mobile [Part2]
jQuery mobile [Part2]jQuery mobile [Part2]
jQuery mobile [Part2]
 
Application de découverte des podcasts à partir du profil utilisateur
Application de découverte des podcasts à partir du profil utilisateurApplication de découverte des podcasts à partir du profil utilisateur
Application de découverte des podcasts à partir du profil utilisateur
 
Hello PhoneGap
Hello PhoneGapHello PhoneGap
Hello PhoneGap
 
Détection des mobiles
Détection des mobilesDétection des mobiles
Détection des mobiles
 
Management de l'environnement et développement durable en affaires. opportuni...
Management de l'environnement et développement durable en affaires. opportuni...Management de l'environnement et développement durable en affaires. opportuni...
Management de l'environnement et développement durable en affaires. opportuni...
 
Cours i développement durable (qu'est ce que l'environnement) Master MQHSE ...
Cours i  développement durable (qu'est ce que l'environnement)  Master MQHSE ...Cours i  développement durable (qu'est ce que l'environnement)  Master MQHSE ...
Cours i développement durable (qu'est ce que l'environnement) Master MQHSE ...
 

Similaire à jQuery mobile [Part1]

CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 

Similaire à jQuery mobile [Part1] (20)

CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdfJWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
 
Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Entity_framework_db first
Entity_framework_db firstEntity_framework_db first
Entity_framework_db first
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Cours html5
Cours html5Cours html5
Cours html5
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 

jQuery mobile [Part1]

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