FAQ MooToolsConsultez toutes les FAQ
Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 1 décembre 2012
Sommaire
→
Les formulaires HTML et autres objets
→
Les formulaires
→
Les champs des formulaires- Comment ajouter du texte à un élément div, span... ?
- Comment ajouter/supprimer une classe ou vérifier qu'elle existe ?
- Comment récupérer la taille d'un élément ?
- Comment gérer les styles CSS ?
- Comment récupérer la nature d'un élément ?
- Comment récupérer la valeur sélectionnée d'une liste déroulante ?
- Comment récupérer les valeurs des checkbox sélectionnées ?
$('id_div').appendText('Texte ajouté.');
Vous pouvez préciser la position :
//Valeur possible : before, after, top, bottom
$('id_div').appendText('Texte ajouté.', 'before');
Tout d'abord, nous allons vérifier si l'élément a une certaine classe. Pour ce faire, on appelle la méthode hasClass avec comme paramètre le nom de la classe recherchée. Si la classe existe sur l'élément, alors la méthode renvoie true, sinon false :
$('id_element').hasClass('ma_classe');
Si la classe n'est pas trouvée, on peut la rajouter avec la méthode addClass. Cette méthode ne rajoutera rien si la classe est déjà présente sur l'élément :
$('id_element').addClass('ma_classe');
Vu qu'on vient de voir que l'on pouvait ajouter une classe, on peut très bien imaginer vouloir en retirer une, c'est pourquoi il y a la méthode removeClass :
$('id_element').removeClass('ma_classe');
Mieux encore, avec la même instruction, on peut ajouter la classe si elle n'est pas présente et sinon la retirer. C'est la méthode toggleClass qui permet cette inversion :
$('id_element').toggleClass('ma_classe');
Nous pouvons récupérer la largeur et hauteur d'un élément avec la méthode getSize() :
<input type="text" id="id_input" value="Je suis un petit texte mais quand même." />
<div id="id_div" style="width:250;height:150;overflow-x:scroll;overflow-y:scroll;border:solid 1px black;">
<p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
<p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
<p>Vu qu'il vaut mieux parfois un petit dessin qu'un long discours,</p>
<p>ceci est un petit test sans prétention aucune.</p>
<p>Il implémente de manière significative</p>
<p>une méthode fort pratique et qui s'appelle :</p>
<p><a href="#1" onclick="$('id_div').scrollTo(0, 0); return false;">ScrollTo</a></p>
<p>Ici, c'est du bourrage pour obtenir la scrolbar horizontale :</p>
--------------------------------------- SansIntérêtSansIntérêtSansIntérêtSansIntérêtSansIntérêt ---------------------------------------
</div>
alert($('id_input').getSize().x); //IE : 146 FF : 146
alert($('id_input').getSize().y); //IE : 22 FF : 22
alert($('id_div').getSize().x); //IE : 250 FF : 252
alert($('id_div').getSize().y); //IE : 150 FF : 152
C'est la largeur visuelle de la case, mais nous pouvons obtenir la largeur réelle de l'élément, avec le texte "caché" et accessible par les barres de défilement. Nous utilisons alors getScrollSize() :
<input type="text" id="id_input" />
<div id="id_div" style="width:250;height:150;overflow-x:scroll;overflow-y:scroll;border:solid 1px black;">
<p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
<p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
<p>Vu qu'il faut parfois mieux un petit dessin qu'un long discours,</p>
<p>ceci est un petit test sans prétention aucune.</p>
<p>Il implémente de manière significative</p>
<p>une méthode fort pratique et qui s'appelle :</p>
<p><a href="#1" onclick="$('id_div').scrollTo(0, 0); return false;">ScrollTo</a></p>
</div>
alert($('id_input').getScrollSize().x);
alert($('id_input').getScrollSize().y);
alert($('id_div').getScrollSize().x);
alert($('id_div').getScrollSize().y);
Pour ajouter un ou plusieurs styles CSS, nous utilisons les méthodes setStyle et setStyles. On leur fournit en paramètres les couples style - valeur.
Partons d'une div :
Nous pouvons lui ajouter par exemple une hauteur, une police et une bordure :
$('id_div').setStyle('height', '40px');
$('id_div').setStyles({
border: '3px solid #333',
font: '20px Arial'
});
Pour récupérer un ou plusieurs styles, nous nous servons des méthodes jumelles
getStyle et getStyles :
alert($('id_div').getStyle('background-color'));
//Résultat : #6699FF
var les_styles = $('id_div').getStyles('height', 'border');
alert(les_styles.height); //40px
alert(les_styles.border); //#333 3px solid
Il n'y a malheureusement pas les méthodes identiques pour supprimer un ou plusieurs
styles. Donc nous passons par removeProperty qui supprime tous
les styles :
$('id_div').removeProperty('style');
Pour retirer un seul style, nous vous proposons de le mettre à vide :
$('id_div').setStyle('background-color', '');
Pour récupérer la nature d'un élément, on cherche son tag :
alert($('id_div').get('tag'));
//Résutlat : div
À savoir, nous pouvons aussi faire une vérification par le biais de la méthode
match. Par exemple, regardons si l'élément est une div :
alert($('id_div').match('div'));
//Résutlat : true
Si la liste n'accepte qu'une sélection :
<select id="id_select" name="fruits">
<option value="pomme">Pomme</option>
<option value="poire">Poire</option>
<option value="fraise" selected>Fraise</option>
<option value="cerise">Cerise</option>
</select>
La méthode getSelected renvoie un tableau d'une seule cellule :
var selection = $('id_select').getSelected();
alert(selection[0].value);
//Résultalt : fraise
Si, par contre, nous avons une liste qui accepte plusieurs sélections :
<select id="id_select" name="fruits[]" multiple>
<option value="pomme">Pomme</option>
<option value="poire" selected>Poire</option>
<option value="fraise" selected>Fraise</option>
<option value="cerise">Cerise</option>
</select>
Le tableau renvoyé sera constitué de plusieurs cellules :
var selection = $('id_select').getSelected();
//Résultalt : selection = [objet,objet]
// selection[0].value = poire
// selection[1].value = fraise
Imaginons une série de checkbox ayant le même nom et dont deux sont sélectionnées :
<input type="checkbox" name="mon_nom" value="value_1" /> Valeur 1
<input type="checkbox" name="mon_nom" value="value_2" checked /> Valeur 2
<input type="checkbox" name="mon_nom" value="value_3" /> Valeur 3
<input type="checkbox" name="mon_nom" value="value_4" checked /> Valeur 4
<input type="checkbox" name="mon_nom" value="value_5" /> Valeur 5
Nous pouvons obtenir les valeurs de toutes celles qui sont cochées.
Plusieurs possibilités s'offrent à nous. La première est assez intuitive et directe.
Elle consiste à rechercher les input qui ont le même nom, de filtrer
sur ceux qui ont un attribut checked et d'en récupérer la valeur sous forme de tableau :
var valeurs = $$('input[name=mon_nom]:checked').get('value');
alert(valeurs);
Toutefois, certains anciens navigateurs sont réticents et préfèrent d'autres syntaxes.
Nous avons donc en seconde position l'utilisation de map qui va
associer une fonction à chaque élément du tableau :
var valeurs = $$('input[name=mon_nom]:checked').map(function(e) { return e.value; });
alert(valeurs);
Une troisième version consiste quant à elle à creer un nouvel objet selon le résultat du filtre.
Elle se rapproche fortement de la précédente car elle associe également aux éléments de l'objet une fonction :
var valeurs = $$("input[name='mon_nom']").filter(function(e) { if(e.checked) return e; });
alert(valeurs[0].value);
alert(valeurs[1].value);
//Notez que pour récupérer uniquement le premier élément coché, on peut utiliser cette instruction :
var valeur = $$("input[name='mon_nom']").filter(function(e) { if(e.checked) return e; })[0].value;
alert(valeur);
Comme vu dans le dernier bout de code, nous pouvons pousser l'audace et redéfinir une méthode
de Array pour ne sortir que la première checkbox cochée, et ce n'est qu'un exemple :
Array.implement({
getFirst: function() {
if(this.length == 0) {
return null;
}
return this[0];
}
});
var valeur = $$('input[name=mon_nom]:checked').getFirst().value;
alert(valeur);