Une zForm avec Mootools
Formation
En Ligne
Avez-vous besoin d'un coach de formation?
Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.
Description
-
Typologie
Formation
-
Méthodologie
En ligne
Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.
Les Avis
Le programme
Bonjour à tous,
Nous allons nous entraîner à utiliser des objets du framework Mootools grâce à la création d'un ZForm avec une prévisualisation via Ajax. Ce mini-tuto vient en complément de « Découvrez mootools, ou bien commencer avec Javascript ».
Prérequis
Avoir des notions de programmation objet
Connaître le langage JavaScript
Connaître le langage PHP
Savoir utiliser les expressions régulières
Avoir lu le tutoriel : « Découvrez mootools, ou bien commencer avec Javascript »
Sujet traité en JavaScript natif : Insertion de balises dans une zone de texte
Le débugger
Pour pouvoir corriger vos scripts avec Mootools, je vous conseille d'utiliser un débugger du type Firebug.
Le ZFormTéléchargez le framework Mootools en version core et more. Une fois que c'est fait, rassemblez les deux fichiers en un seul, appelé mootools.js, et placez-le dans un dossier public et un sous-dossier js.
Les différents élémentsLe ZForm va nous permettre d'insérer des balises destinées à mettre en forme un texte, à ajouter des images, des titres et autres. Notre ZForm va posséder plusieurs éléments HTML :
le champ de texte : le textarea ;
les boutons simples de mise en forme ;
les boutons avec choix de mise en forme ;
les listes de choix pour la mise en forme du texte.
Les boutons simples vont insérer, lors d'un clic, une paire de balises de mise en forme dans le champ de texte.
Par exemple, pour la propriété « texte en gras », lors du clic sur le bouton gras, notre ZForm va afficher à l'intérieur du champ de texte :
<gras>texte</gras>Voici les listes des boutons simples de mise en forme dont nous aurons besoin :
gras ;
italique ;
barre ;
souligne ;
marge ;
erreur ;
infos ;
question ;
attention.
Voici les images que nous allons utiliser pour le TP :
Les boutons avec choixLa liste des boutons avec choix :
lien ;
lien vers une ancre ;
ancre ;
puce normale ;
puce numérique ;
tableau ;
citation ;
image ;
clip.
Je vous donne aussi les images correspondantes, je suis sympa :) :
Les listes de choixCes boutons vont, lors du survol, faire apparaître un menu de choix à cliquer ; ils seront utiles pour les couleurs, polices d'écriture…
Les boutons à menu :
police ;
taille du texte ;
position ;
flottant ;
couleur ;
avertissement : contiendra les boutons simples (question, erreur, infos, attention) ;
titre.
Les images pour les listes de choix :
Le formulaire html<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ZForm</title> <script type="text/javascript" src="public/js/mootools.js"></script> <script type="text/javascript" src="public/js/zform.js"></script> <link href="public/css/zform.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript"> window.addEvent('domready', function () { var form = new ZForm(); form.listeningEvent(); }); </script> </head> <body> <div id="main"> <form id="zform" action="" method="post"> <fieldset><legend>ZForm</legend> <!-- Boutons simples --> <img data-bt="gras" class="splButtons bt-code" src="public/images/boutons/bt-gras.gif" alt="Gras" title="Gras" /> <img data-bt="italique" class="splButtons bt-code" src="public/images/boutons/bt-italique-black.gif" alt="Itlalique" title="Italique"/> <img data-bt="souligne" class="splButtons bt-code" src="public/images/boutons/bt-souligne.gif" alt="Souligné" title="Souligner"/> <img data-bt="barre" class="splButtons bt-code" src="public/images/boutons/bt-surligne.gif" alt="Barré" title="Barrer" /> <img data-bt="marge" class="splButtons bt-code" src="public/images/boutons/bt-marge.gif" alt="Marge" title="Marge" /> <img data-bt="gras" class="splButtons bt-code" src="public/images/boutons/bt-gras.gif" alt="Gras" title="Gras" /> <!-- Boutons choix --> <img data-bt="liste" class="dlgButtons bt-code" src="public/images/boutons/bt-puce.gif" alt="Listes" /> <img data-bt="listnum" class="dlgButtons bt-code" src="public/images/boutons/bt-pucenum.gif" alt="Listes Numériques" /> <img data-bt="tableau" class="dlgButtons bt-code" src="public/images/boutons/bt-tableau.gif" alt="Tableau" /> <img data-bt="url" class="dlgButtons bt-code" src="public/images/boutons/bt-lien.gif" alt="lien" /> <img data-bt="ancre" class="dlgButtons bt-code" src="public/images/boutons/bt-ancre.gif" alt="Ancre" /> <img data-bt="urlancre" class="dlgButtons bt-code" src="public/images/boutons/bt-urlancre.gif" alt="Lien vers une ancre" /> <img data-bt="citation" class="dlgButtons bt-code" src="public/images/boutons/bt-citation.gif" alt="Citation" /> <img data-bt="image" class="dlgButtons bt-code" src="public/images/boutons/bt-image.gif" alt="Images" /> <img data-bt="clip" class="dlgButtons bt-code" src="public/images/boutons/bt-clip.gif" alt="Clip Video" /> <!-- Boutons listes --> <img data-bt="police" class="bt-code listButtons" src="public/images/boutons/bt-font.gif" alt="Police" title="Police" /> <div class="sliderBox"> <a class="slider-link" rel="Arial">Arial</a> <a class="slider-link" rel="Comic Sans MS">Comic Sans MS</a> <a class="slider-link" rel="Verdana">Verdana</a> <a class="slider-link" rel="Times New Roman" >Times New Roman</a> <a class="slider-link" rel="Rockwell Extra Bold">Rockwell Extra Bold</a> </div> <img data-bt="taille" class="bt-code listButtons" src="public/images/boutons/bt-size.gif" alt="Taille de la police" title="Taille de la police" /> <div class="sliderBox"> <a class="slider-link" rel="xx-small">Très très petit</a> <a class="slider-link" rel="x-small">Très petit</a> <a class="slider-link" rel="small">Petit</a> <a class="slider-link" rel="medium">Normal</a> <a class="slider-link" rel="large">Grand</a> <a class="slider-link" rel="x-large">Très grand</a> <a class="slider-link" rel="xx-large">Très très grand</a> </div> <img data-bt="couleur" class="bt-code listButtons" src="public/images/boutons/bt-color.gif" alt="Couleur de la police" title="Couleur de la Police" /> <div class="sliderBox"> <a class="slider-link bgWhite" rel="#FFFFFF"> </a> <a class="slider-link bgGray" rel="#CCCCCC"> </a> <a class="slider-link bgRed" rel="#FF0000"> </a> <a class="slider-link bgOrange" rel="#FF6600"> </a> <a class="slider-link bgYellow" rel="#FFCC00"> </a> <a class="slider-link bgGreen" rel="#33CC00"> </a> <a class="slider-link bgBlue" rel="#0000CC"> </a> <a class="slider-link bgMarine" rel="#000033"> </a> <a class="slider-link bgBlack" rel="#000000"> </a> </div> <img data-bt="titre" class="bt-code listButtons" src="public/images/boutons/bt-titre.gif" alt="Titre" title="Titre" /> <div class="sliderBox"> <a class="slider-link" rel="h1">Titre 1</a> <a class="slider-link" rel="h2">Titre 2</a> <a class="slider-link" rel="h3">Titre 3</a> </div> <img data-bt="position" class="bt-code listButtons" src="public/images/boutons/bt-position.gif" alt="Position du texte" /> <div class="sliderBox"> <a class="slider-link" rel="gauche">Gauche</a> <a class="slider-link" rel="center">Centrer</a> <a class="slider-link" rel="droite">Droite</a> <a class="slider-link" rel="justifier">Justifier</a> </div> <img data-bt="flottant" class="bt-code listButtons" src="public/images/boutons/bt-float.gif" alt="Couleur de la police" /> <div class="sliderBox"> <a class="slider-link" rel="gauche">Flottant à gauche</a> <a class="slider-link" rel="droit">Flottant à droite</a> </div> <img data-bt="avert" class="bt-code listButtons" src="public/images/boutons/bt-avert.gif" alt="Avertissements" /> <div class="sliderBox"> <img data-bt="question" class="splButtons bt-code" src="public/images/boutons/bt-question.gif" alt="Question" /> <img data-bt="attention" class="splButtons bt-code" src="public/images/boutons/bt-attention.gif" alt="Attention" /><br /> <img data-bt="infos" class="splButtons bt-code" src="public/images/boutons/bt-infos.gif" alt="Infos" /> <img data-bt="erreur" class="splButtons bt-code" src="public/images/boutons/bt-erreur.gif" alt="Erreur" /> </div> <div class="block"> <textarea id="text" name="text" cols="100" rows="10"></textarea> </div> <div id="control"> <input type="reset" value="effacer" /> <input type="submit" value="Valider" /> </div> </fieldset> </form> <div id="prev"> <h4>Prévisualisation : </h4> </div> </div> </body> </html>Une petite précision ici, nous instancions et utilisons notre objet de cette manière :
<script type="text/javascript"> // Lorsque le dom est lu window.addEvent('domready', function () { var form = new ZForm(); // On crée notre objet ZForm form.listeningEvent(); // On écoute les événements du ZForm }); </script> La feuille de style#parser { margin: auto; width: 80%; } fieldset { margin: auto; width: 70%; } #control { float: none; display: block; clear: both; margin-left : 3%; } table { background-color: #ccc; padding : 1%; } td { border : 1px solid #eee; background-color: #fff; } .title-citation { background-color: #eee; font-weight: bold; border: #ccc 1px solid; border-bottom: none; text-indent : 1%; width: 20%; margin:0; margin-top : 1%; } .citation { margin:0; border: #ccc 1px solid; padding: 1%; } #prev { border: 1px solid #999; margin:...Avez-vous besoin d'un coach de formation?
Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.
Une zForm avec Mootools